Aqui's o meu HTML:
<select id="ddlProducts" name="ddProducts">
<option>Product1 : Electronics </option>
<option>Product2 : Sports </option>
</select>
Quero tornar o nome do produto (i.e. 'Product1', 'Product2' , etc) negrito, e as suas categorias(ex. Electrónica, Desporto, etc) itálico, usando apenas CSS. Eu encontrei uma pergunta antiga que mencionava isso's não é possível usando HTML e CSS, mas espero que, lá's uma solução agora.
Existem apenas alguns atributos de estilo que podem ser aplicados a um elemento <opção>
.
Isto porque este tipo de elemento é um exemplo de um "elemento substituído". Eles são dependentes do SO e não fazem parte do HTML/browser. Ele não pode ser estilizado via CSS
.
Existem plug-ins/libraries de substituição que se parecem com um <select>
mas na verdade são compostos de elementos regulares HTML
que **CAN*** são estilizados.
Não, it's não é possível, pois o estilo para estes elementos é tratado pelo usuário's OS. MSDN irá responder à sua pergunta aqui:
Exceto para
background-color
ecolor
, configurações de estilo aplicadas através do objeto estilo para o elemento opção são ignoradas.
Como dito acima, não é realmente possível; no entanto, se você quiser apenas estilizar o estado inicial para algo como 'Selecione Produto...' opção antes que um usuário interaja com o campo, você poderia fazer algo como abaixo --
Os estilos de exemplo abaixo (tecnicamente todos) a primeira opção vermelha e uma vez que um usuário interage removerá essa opção (que tem o valor="defaultValue" set) e removerá a classe aplicada à seleção. Você pode aplicar outras opções além da cor também, mas elas só afetarão o campo uma vez alterado, não a visualização de lista.
**CSS***
.default-value{
color: red;
}
**jQuery***
$("select").addClass('default-value');
$("select").bind("focus", function () {
$(this).children('option[value="defaultValue"]').remove();
$(this).removeClass('default-value');
});