Выдвигающийся блок при нажатии на 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

[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-s...ng-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>