Ik heb een selectievak en ik probeer de achtergrondkleur van de opties te wijzigen wanneer op het selectievak is geklikt en alle opties worden weergegeven.
body {
background: url(https://subtlepatterns.com/patterns/black_linen_v2.png) repeat;
}
select {
margin: 40px;
background: rgba(0, 0, 0, 0.3);
color: #fff;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}<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>Antwoord 1, autoriteit 100%
Je moet background-colorop de option-tag zetten en niet de select-tag…
select option {
margin: 40px;
background: rgba(0, 0, 0, 0.3);
color: #fff;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}
Als je elk van de optiontags wilt stylen.. gebruik dan de css attributeselector:
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"] {
background: rgba(100, 100, 100, 0.3);
}
select option[value="2"] {
background: rgba(150, 150, 150, 0.3);
}
select option[value="3"] {
background: rgba(200, 200, 200, 0.3);
}
select option[value="4"] {
background: rgba(250, 250, 250, 0.3);
}<select>
<option value="">Please choose</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>Antwoord 2, autoriteit 11%
Ik weet niet of je het hebt overwogen of niet, maar als je aanvraag is gebaseerd op het kleuren van verschillende groepen items, moet je waarschijnlijk de tag <optgroup>gebruiken in combinatie met een klasse voor verdere verwijzing. Bijvoorbeeld:
<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>
en schrijf dan in de kop van je document de css als volgt:
<style type="text/css">
.green option{
background-color:#0F0;
}
.blue option{
background-color:#00F;
}
</style>
Antwoord 3, autoriteit 10%
Ja, je kunt dit op de tegenovergestelde manier instellen:
select { /* desired background */ }
option:not(:checked) { background: #fff; }
Controleer hieronder of het werkt:
select {
margin: 50px;
width: 300px;
background: #ff0;
color: #000;
}
option:not(:checked) {
background-color: #fff;
}<select>
<option val="">Select Option</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>Antwoord 4, autoriteit 5%
Vergelijkbaar met sommige van de antwoorden, maar niet echt vermeld, is om een klasse toe te voegen aan de eigenlijke optie-tag en css-klassen te gebruiken… dit werkt momenteel voor mij zonder problemen op IE (zie hierboven ss).
p>
<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;
}
Antwoord 5
Een andere optie is om Javascript te gebruiken:
if (document.getElementById('selectID').value == '1') {
document.getElementById('optionID').style.color = '#000';
(Niet zo schoon als de CSS-attribuutkiezer, maar krachtiger)
Antwoord 6
Mijn selecties zouden de achtergrond niet kleuren totdat ik !important aan de stijl toevoegde.
input, select, select option{background-color:#FFE !important}
Antwoord 7
Als je de binnen-a echt wilt stylen, overweeg dan over te schakelen naar een op Javascript/CSS gebaseerde vervolgkeuzelijst, zoals http://getbootstrap.com/2.3.2/components.html#dropdownsof https://silviomoreto.github.io/bootstrap-select/examples/. Dit omdat browsers zoals IE opmaak van opties binnen elementen niet toestaan. Chrome/OSX heeft ook dit probleem: je kunt opties niet stylen.
Er is echter een waarschuwing aan die benadering verbonden. Dit soort menu’s werken heel anders op mobiele platforms omdat er geen native elementen worden gebruikt. Ze kunnen ook vervelende eigenaardigheden hebben op het bureaublad. Mijn advies is 1) schrijf niet zelf en 2) zoek een bibliotheek die echt goed is getest.
Antwoord 8
Hier komt het wat ik over het onderwerp heb geleerd!
De CSS 2-specificatie loste het probleem niet op van hoe formulierelementen aan gebruikers moeten worden gepresenteerd!
Lees hier:smashing magazine
Uiteindelijkzul je nooit een technisch artikel van w3c of andere artikelen over dit onderwerp vinden. Het stylen van vormelementen, met name select boxes, wordt niet volledig ondersteund, maar u kunt er wel rondrijden… met enige moeite!
HTML-formulierelementen stylen
Verspil geen tijd met hacks, lees de links en leer hoe professionals de klus klaren!
Antwoord 9
$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>';
voeg $htmlIngressCsstoe aan je html-gedeelte 🙂
Antwoord 10
Verander eenvoudig de bg-kleur
select {
background: #6ac17a;
color:#fff;
}