Как изменить цвет фона опции select box?
у меня есть поле выбора, и я пытаюсь изменить цвет фона параметров, когда поле выбора было нажато и показывает все параметры.
См. Fiddle
HTML-код
<select>
<option val="">Please choose</option>
<option val="1">Option 1</option>
<option val="2">Option 2</option>
<option val="3">Option 3</option>
<option val="4">Option 4</option>
</select>
в CSS
select{
margin:40px;
background: rgba(0,0,0,0.3);
color:#fff;
text-shadow:0 1px 0 rgba(0,0,0,0.4);
}
10 ответов
нужно поставить background-color
на option
- тег, а не тег select
тег...
select option {
margin: 40px;
background: rgba(0, 0, 0, 0.3);
color: #fff;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}
если вы хотите, чтобы стиль каждого option
теги.. используйте css attribute
селектор:
select option {
margin: 40px;
background: rgba(0, 0, 0, 0.3);
color: #fff;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}
select option[value="1"] { /* value not val */
background: rgba(100, 100, 100, 0.3);
}
select option[value="2"] { /* value not val */
background: rgba(200, 200, 200, 0.3);
}
/* ... */
Я не знаю, рассматривали ли вы это или нет, но если ваше приложение основано на окраске различных групп элементов, вы, вероятно, должны использовать <optgroup>
тег в сочетании с классом для дальнейшей привязки. Например:
<select>
<optgroup label="Numbers" class="green">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</optgroup>
<optgroup label="Letters" class="blue">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</optgroup>
</select>
и затем в голове вашего документа напишите css следующим образом:
<style type="text/css">
.green option{
background-color:#0F0;
}
.blue option{
background-color:#00F;
}
</style>
Да, вы можете установить это противоположным способом, используя это,
option:not(:checked) { }
проверить это демо jsFiddle
HTML-код
<select>
<option val="">Please choose</option>
<option val="1">Option 1</option>
<option val="2">Option 2</option>
<option val="3">Option 3</option>
<option val="4">Option 4</option>
</select>
в CSS
select{
margin:40px;
background: rgba(0,0,0,0.3);
color:#FFF;
text-shadow:0 1px 0 rgba(0,0,0,0.4);
}
option:not(:checked) {
background-color: white;
color:#000;
}
подобно некоторым ответам, но на самом деле не указано, чтобы добавить класс к фактическому тегу опции и использовать классы css...в настоящее время это работает для меня без проблем в IE (см. выше ss).
<select id="reviewAction">
<option class="greenColor">Accept and Advance Status</option>
<option class="redColor">Return for Modifications</option>
</select>
CSS:
.greenColor{
background-color: #33CC33;
}
.redColor{
background-color: #E60000;
}
Если вы действительно хотите создать стиль внутри a, подумайте о переключении на JavaScript / CSS, напримерhttp://getbootstrap.com/2.3.2/components.html#dropdowns или https://silviomoreto.github.io/bootstrap-select/examples/. Это потому, что браузеры, такие как IE не допускайте стилизации параметров в элементах. Chrome / OSX также имеет эту проблему - вы не можете стилизовать параметры.
однако к этому подходу прилагается предупреждение. Эти типы меню работают очень по-разному на мобильных платформах, потому что собственные элементы не используются. Они могут иметь раздражающие причуды на рабочем столе, а также. Мой совет: 1) Не пишите свои собственные и 2) Найдите библиотеку, которая была действительно хорошо протестирована.
$htmlIngressCss='<style>';
$multiOptions = array("" => "All");
$resIn = $this->commonDB->getIngressTrunk();
while ($row = $resIn->fetch()) {
if($row['IsActive']==0){
$htmlIngressCss .= '.ingressClass select, option[value="'.$row['TrunkInfoID'].'"] {color:red;font-weight:bold;}';
}
$multiOptions[$row['TrunkInfoID']] = $row['IngressTrunkName'];
}
$htmlIngressCss.='</style>';
добавить $htmlIngressCss
в вашей части html:)
другой вариант - использовать Javascript:
if (document.getElementById('selectID').value == '1') {
document.getElementById('optionID').style.color = '#000';
(не такой чистый, как селектор атрибутов CSS, но более мощный)
мой выбор не будет окрашивать фон, пока я не добавлю !важно для стиля.
input, select, select option{background-color:#FFE !important}
вот что я узнал об этом предмете!
спецификация CSS 2 не рассматривала проблему того, как элементы формы должны быть представлены пользователям период!
читать здесь: smashing magazine
В конце концов, вы никогда не найдете никакой технической статьи из w3c или другой, адресованной этой теме. Элементы формы стиля, в частности поля выбора, не полностью поддерживаются, однако вы можно объехать... с некоторым усилием!
Создание Пользовательских Виджетов
Не тратьте время с hacks e такие читать ссылки и узнать, как профи получить работу!