оформление select через css

[slo_nik]

Добрый вечер.

Есть задача оформить выпадающий список при помощи css .

Попробовал изменить немного оформление, но работает нормально только в Mozilla, остальные браузеры игнорируют стили, хотя надо изменить только background по :hover и применить padding.

Применил такие правила:

.s-t-select option{padding:4px 0 4px 10px;}
.s-t-select option:hover{background-color:#9bb5c9; color:#fff;}

Работает, повторюсь, только в Mozilla...

Подскажите, пожалуйста, как решить данную задачу. В инете как вариант нашёл только плагины на jquery, но не хочется навешивать скрипты ради одного списка.

Вот ссылка, список вначале страницы, "выбор по экватору"

Вот так это выглядит в Mozilla...

[zSpx]

Подключайте плагины для jq, монструозный cusel или что-нибудь легковесное-самописное, ибо по другому кроссбраузерно стилизовать селект не получится.

[slo_nik]

  On 12/13/2011 at 10:43 PM, zSpx said:

Подключайте плагины для jq, монструозный cusel или что-нибудь легковесное-самописное, ибо по другому кроссбраузерно стилизовать селект не получится.

Что бы Вы порекомендовали взамен cusel?

[pdbq]

  On 12/13/2011 at 10:43 PM, zSpx said:

Подключайте плагины для jq

полностью согласен. Либо jQuery либо (к примеру одын либо подменить select два и тры)

а это пример простого оформления, php уберите. работает во всех браузерах)

<select name="product_sost_prodat" style="width: 142px;" required>
				<option></option>";
					<?while($qwe=mysql_fetch_row($result)){
						if($zav!=$qwe[3])
						echo "<optgroup label='$qwe[3]'
						style='background: yellow none repeat scroll 0% 50%;
						-moz-background-clip: -moz-initial;
						-moz-background-origin: -moz-initial;
						-moz-background-inline-policy: -moz-initial;'>
						</optgroup>";
						if($sir!=$qwe[2])
						echo "<optgroup label='$qwe[2]'
						style='background: orange none repeat scroll 0% 50%;
						-moz-background-clip: -moz-initial;
						-moz-background-origin: -moz-initial;
						-moz-background-inline-policy: -moz-initial;'>
						</optgroup>";
						echo "<option onclick='document.bgColor = #0099cc;' value='$qwe[0]'>$qwe[1]</option>";
						$zav=$qwe[3];
						$sir=$qwe[2];
						}?>
</select>

Edited December 14, 2011 by pdbq

[zSpx]

Если такой селект 1, то советую написать, ибо писать там, в принципе, нечего. Скрываете стандартный селект, создаете скриптом в ДОМе скрытый инпут, делаете обычный список, стилизуете, привязываете онклик событие к каждой лишке и передаете, скажем, ее айдишник в значение скрытого инпута.

[Gaspode]

Нашёл у себя в закладках. Может, пригодится.

[slo_nik]

Благодарю всех откликнувшихся... буду пробовать )))