Hoe stijl je de optie van een html "select" element?

Hier is mijn HTML:

<select id="ddlProducts" name="ddProducts"> 
    <option>Product1 : Electronics </option>
    <option>Product2 : Sports </option>
</select>

Ik wil de naam van het product (d.w.z. 'Product1', 'Product2' , enz) vet maken, en de categorieën (viz. Elektronica, Sport, enz) cursief, alleen met CSS. Ik vond een oude vraag die vermeldde dat het niet mogelijk is om HTML en CSS te gebruiken, maar hopelijk is er nu een oplossing.

TylerH
Bewerkte vraag 27ste2 maart 2019 в 2:05
Programmering
html css drop-down-menu
26ste4 augustus 2011 в 6:02
1 kijk op
Oplossing

Er zijn maar een paar stijl attributen die kunnen worden toegepast op een `` element.

Dit komt omdat dit type element een voorbeeld is van een "replaced element". Ze zijn OS-afhankelijk en maken geen deel uit van de HTML/browser. Het kan niet worden gestyled via CSS.

Er zijn vervangende plug-ins/bibliotheken die eruit zien als een <select> maar eigenlijk zijn samengesteld uit gewone HTML elementen die KUNNEN worden gestyled.

Jacob
Bewerkt antwoord 30ste0 september 2019 в 9:58
Commentaren (8)

Nee, dat's niet mogelijk, omdat de styling voor deze elementen wordt afgehandeld door het OS van de gebruiker's. MSDN zal uw vraag hier beantwoorden:

Met uitzondering van achtergrondkleur en kleur worden stijlinstellingen die via het stijlobject voor het optie-element worden toegepast, genegeerd.

georgeawg
Bewerkt antwoord 2de5 november 2019 в 8:10
Commentaren (6)

Zoals hierboven gezegd, niet echt mogelijk; maar als je gewoon de initiële staat van zoiets als een 'Selecteer product...' optie wilt stijlen voordat een gebruiker met het veld interageert, zou je iets als hieronder kunnen doen --

Het onderstaande voorbeeld stijlen (technisch gezien alle) de eerste optie rood en zodra een gebruiker interageert zal verwijderen die optie (die de value="defaultValue" ingesteld) en verwijdert de klasse toegepast op de select. Je kunt naast kleur ook andere opties toepassen, maar die hebben alleen invloed op het veld als het eenmaal is gewijzigd, niet op de lijstweergave.

CSS

.default-value{
  color: red;
}

jQuery

$("select").addClass('default-value');

$("select").bind("focus", function () {
  $(this).children('option[value="defaultValue"]').remove();
  $(this).removeClass('default-value');
});
Victor Bjelkholm
Bewerkt antwoord 27ste5 april 2013 в 3:41
Commentaren (0)