Можно ли стилизовать поле выбора? [закрыто]
Или даже проще, массив «содержащий» сам. См. Пример:
var arr = [];
arr[0] = arr;
3 ответа
Я видел некоторые плагины jQuery, которые конвертируют в и
в , так что вы можете стилизовать его с помощью CSS. Не может быть слишком сложно свернуть свой собственный.
Вот такой: https://gist.github.com/1139558 (Раньше он здесь , но похоже сайт не работает.)
Используйте его так:
$('#myselectbox').selectbox();
Оформляйте его так:
div.selectbox-wrapper ul {
list-style-type:none;
margin:0px;
padding:0px;
}
div.selectbox-wrapper ul li.selected {
background-color: #EAF2FB;
}
div.selectbox-wrapper ul li.current {
background-color: #CDD8E4;
}
div.selectbox-wrapper ul li {
list-style-type:none;
display:block;
margin:0;
padding:2px;
cursor:pointer;
}
Вы можете до некоторой степени использовать CSS сам по себе
select {
background: red;
border: 2px solid pink;
}
Но это полностью зависит от браузера. Некоторые браузеры упрямы.
Однако на этом вы пока не закончите, и это не всегда выглядит очень хорошо. Для полного контроля вам нужно заменить выбор через jQuery собственным виджетом, который имитирует функциональность поля выбора. Убедитесь, что когда JS отключен, на его месте находится обычное поле выбора. Это позволяет большему количеству пользователей использовать вашу форму и способствует доступности.
Что касается CSS, Mozilla кажется наиболее дружелюбной, особенно из FF 3.5+. Браузеры Webkit в основном просто делают свое дело и игнорируют любой стиль. IE очень ограничен, хотя IE8 позволяет вам, по крайней мере, задать цвет / ширину границы.
На самом деле следующее выглядит неплохо в FF 3.5+ (конечно, выбирая ваши цветовые предпочтения):
select {
-moz-border-radius: 4px;
-moz-box-shadow: 1px 1px 5px #cfcfcf inset;
border: 1px solid #cfcfcf;
vertical-align: middle;
background-color: transparent;
}
option {
background-color: #fef5e6;
border-bottom: 1px solid #ebdac0;
border-right: 1px solid #d6bb86;
border-left: 1px solid #d6bb86;
}
option:hover {
cursor: pointer;
}
Но когда дело доходит до IE, вы должны отключить цвет фона в этой опции, если вы этого не хотите. для отображения, когда меню параметров не раскрывается. И, как я уже сказал, webkit делает свое дело.