Aquí está mi HTML:
<select id="ddlProducts" name="ddProducts">
<option>Product1 : Electronics </option>
<option>Product2 : Sports </option>
</select>
Quiero hacer que el nombre del producto (es decir, 'Producto1', 'Producto2', etc) en negrita, y sus categorías (a saber, Electrónica, Deportes, etc) en cursiva, utilizando sólo CSS. Encontré una pregunta antigua que mencionaba que no es posible usando HTML y CSS, pero espero que ahora haya una solución.
Sólo hay unos pocos atributos de estilo que se pueden aplicar a un elemento <option>
.
Esto se debe a que este tipo de elemento es un ejemplo de un "elemento reemplazado". Son dependientes del sistema operativo y no forman parte del HTML/navegador. No puede ser estilizado a través de CSS
.
Hay plug-ins/bibliotecas de reemplazo que se parecen a un <select>
pero en realidad están compuestos por elementos HTML
regulares que Pueden ser estilizados.
No, no es posible, ya que el estilo de estos elementos es manejado por el sistema operativo del usuario. MSDN responderá a su pregunta aquí:
Excepto para color de fondo
y color
, los ajustes de estilo aplicados a través del objeto de estilo para el elemento de opción son ignorados.
Como se ha dicho antes, no es posible; sin embargo, si sólo quiere dar estilo al estado inicial de algo como una opción "Seleccionar producto..." antes de que el usuario interactúe con el campo, podría hacer algo como lo siguiente...
El ejemplo de abajo estiliza (técnicamente todo) la primera opción en rojo y una vez que un usuario interactúa eliminará esa opción (que tiene el valor="defaultValue" establecido) y eliminará la clase aplicada a la selección. También puede aplicar otras opciones además del color, pero sólo afectarán al campo una vez cambiado, no a la vista de la 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');
});