Выдвигающийся блок при нажатии на select

[Webtest]

Здравствуйте.

Можно ли как-нибудь сделать так, чтобы при нажатии на <select>выдвигался не список, а блок, например, div?

Вот неплохой пример, но, к сожалению, не для селекта:
http://www.nofaq.net/2014/03/%D0%BA%D0%B0%D0%BA-%D1%81%D0%B4%D0%B5%D0%BB%D0%B0%D1%82%D1%8C-%D0%BF%D0%BB%D0%B0%D0%B2%D0%BD%D0%BE-%D1%80%D0%B0%D1%81%D0%BA%D1%80%D1%8B%D0%B2%D0%B0%D 1%8E%D1%89%D0%B8%D0%B9%D1%81%D1%8F-div/

Делал через чистый ЦСС, но получается убого.
#slideout {
margin-top: 0px;
left: 263px;
}
#slideout_inner {
position: fixed;
top: 40px;
left: -2270px;
background-color: white;
border: 1px solid #A9A9A9;
z-index: 999;
}
#slideout:hover {

}
#slideout:hover #slideout_inner {
left: 268px;
top: 20px;
}

[рони]

Webtest,
можно ))) ещё бы ваш html увидеть

[Webtest]

рони, ничего необычного, просто, хочу единый стиль сохранить.
<?php
echo '<div id="t">';
echo '<form method="post" class="form">';
echo '<select name="theme">';
$folder = opendir("themes");
echo '<option selected disabled>Выберите тему</option>';
while (($entry = readdir($folder)) != false) {
if ($entry != "." && $entry != "..") {
echo "<option class='header' value='$entry'>" . $entry. "</option>";
}
}
$folder = closedir($folder);
echo '</select>';
echo '<input type="submit" value="Ок" name="theme_submit">';
echo '</form>';
echo '<form method="post">';
echo '<select>';
echo '<option selected disabled>Выберите фон</option>';
echo '</select>';
echo '<input type="submit" value="Обновить фоны">';
echo '</form>';
echo '</div>';
?>
Там где 'Выберите фон', надо такое сделать.
CSS код:
#t {
position:absolute;
top:0;
margin:0;
width:100%;
height:100px;
background: white;
opacity:1;
color: black;
}

/*.select shape {
height: 22px;
width: 120px;
}*/

* {
margin:0;
padding:0;
}

form.form {
float: left;
}

Кстати, не смотрите что у меня не объеденено все в 1 echo, я пока там все пишу/удаляю, так удобнее.

[рони]

Webtest,
html а не php :agree:

[Webtest]

рони,

<form method="post">
<select>
<option selected disabled>Выберите фон</option>
</select>
<input type="submit" value="Обновить фоны">
</form>
Вот, чтобы при нажатии на Выберите фон выдвигался снизу блок, в который я бы мог что-нибудь настрочить.

[рони]

Webtest,
а где блок-то сам?

[Webtest]

рони, но я не знаю как его вставить, можно просто div, который бы расширялся по мере добавления в него контента. Если его вставить в селект, то он не отображается, если ему задать опр. координаты, и, чтобы он при наведении выходил из-за края страницы (как я сделал в шапке темы), то в каждом браузере по разному выглядит + работает плохо.
Раньше было вот так:

<form class="fleft">
<div id="slideout">
<select disabled>
<option selected disabled>Выберите фон</option>
</select>
<div id="slideout_inner">
<form method="post" action="index.tpl" onsubmit="return false">
<button class="color" id="red" name="button" value="red" onclick='change_color(this)'></button>
<button class="color" id="orange" name="button" value="orange" onclick='change_color(this)'></button>
<button class="color" id="yellow" name="button" value="yellow" onclick='change_color(this)'></button>
<button class="color" id="green" name="button" value="green" onclick='change_color(this)'></button>
<button class="color" id="blue" name="button" value="blue" onclick='change_color(this)'></button>
<button class="color" id="lightBlue" name="button" value="lightBlue" onclick='change_color(this)'></button>
<button class="color" id="purple" name="button" value="purple" onclick='change_color(this)'></button>
<button class="color" id="gray" name="button" value="gray" onclick='change_color(this)'></button>
<button class="color" id="brown" name="button" value="brown" onclick='change_color(this)'></button>
<button class="color" id="white" name="button" value="white" onclick='change_color(this)'></button>
</form>
</div>
</div>
<input type="submit" value="Обновить фоны" class="header" id="refreshButton">
</form>

[рони]

Webtest,
а вы не кастомизированый ли селект хотите получить?
http://dimox.name/examples/styling-select-boxes-using-jquery-css/

[Webtest]

рони, посмотрел по вашей ссылке, нужного не нашел, нужно именно чтобы при нажатии на селект открывался блок, чтобы я туда много чего мог добавить.
Несколько кнопок для смены темы и пр.

[рони]

Webtest,
:)
<!DOCTYPE HTML>

<html>

<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">.forma{
text-align:center;
width:400px;
padding:20px;
background:#fefefe;
border:1px solid #000;
border-radius:10px;
}

.open_form{
border:1px solid #fc5f00;
border-radius:20px;
font-size:20px;
padding:10px 25px;
background:#fa9050;
box-shadow:inset 0 1px 5px rgba(255,255,255,.6),inset 0 -15px 10px 5px #fc5f00,0 1px 2px rgba(0,0,0,.2);
text-shadow:1px 1px 0px #cc4f03;
width:250px;
margin:0 auto;
cursor:pointer;
}

.open_form:hover{
background:#fa9050;
box-shadow:inset 0 1px 5px rgba(255,255,255,.6),inset 0 -15px 5px 0px #fc5f00,0 1px 2px rgba(0,0,0,.2);
}

label:hover .sama_forma{
border:1px solid #fc5f00;
border-radius:20px;
font-size:20px;
padding:10px 25px;
background:#fa9050;
box-shadow:inset 0 1px 5px rgba(255,255,255,.6),inset 0 -15px 10px 5px #fc5f00,0 1px 2px rgba(0,0,0,.2);
text-shadow:1px 1px 0px #cc4f03;
width:250px;
margin:0 auto;
cursor:pointer;
height:50px;
transition:all 2s 0.5s;
-moz-transition:all 2s 0.5s;
-webkit-transition:all 2s 0.5s;
-o-transition:all 2s 0.5s;
}

.sama_forma{
background:#fa9050;
height:0px;
margin-top:0px;
overflow:hidden;
}
</style>
</head>

<body>
<div class="forma">
<label><div disabled class="open_form">
Выберите фон
</div>
<div class="sama_forma" >
<button class="color" id="red" name="button" value="red" onclick='change_color(this)'></button>
<button class="color" id="orange" name="button" value="orange" onclick='change_color(this)'></button>
<button class="color" id="yellow" name="button" value="yellow" onclick='change_color(this)'></button>
<button class="color" id="green" name="button" value="green" onclick='change_color(this)'></button>
<button class="color" id="blue" name="button" value="blue" onclick='change_color(this)'></button>
<button class="color" id="lightBlue" name="button" value="lightBlue" onclick='change_color(this)'></button>
<button class="color" id="purple" name="button" value="purple" onclick='change_color(this)'></button>
<button class="color" id="gray" name="button" value="gray" onclick='change_color(this)'></button>
<button class="color" id="brown" name="button" value="brown" onclick='change_color(this)'></button>
<button class="color" id="white" name="button" value="white" onclick='change_color(this)'></button>
</div> </label>

</div>


</body>

</html>

[Webtest]

рони, я делал как там, но надо чтобы было именно select, чтобы было единообразие стиля, вот так: http://hostingkartinok.com/show-image.php?id=41b65512e0d86f27cff29ae58f55a182

[рони]

Webtest,
ищите стилизованные селекты на свой вкус