2012-01-31 18 views
9

En un menú desplegable de selección, tengo que hacer ciertos artículos' fuertes/en negrita '.css seleccione desplegable en negrita en <option> 's

¿Cómo puedo hacer esto?

ejemplo de lo que idealmente requiero:

<option value="#"><strong>Andorra</strong></option> 
<option value="#">--Grandvalira</option> 
<option value="#">--Vallnord</option> 
<option value="#"><strong>Austria</strong></option> 
<option value="#">--Amadé</option> 
<option value="#">--Bad Kleinkirchheim</option> 
<option value="#">--Mallnitz</option> 
+0

conformarse con optgoups o construir un menú desplegable basado en js/css "falso" - también, posible duplicar en: http://stackoverflow.com/questions/7208786/how-to-style-the-option-of-a -html-select – Hannes

Respuesta

5

podría utilizar :nth-child(N)

option:nth-child(1), option:nth-child(4) { 
    font-weight:bold; 
} 

Demostración:http://jsfiddle.net/Sotiris/sqshN/

Encuentra más información y soporte de los navegadores para esta pseudo-clase en http://reference.sitepoint.com/css/pseudoclass-nthchild

+6

gracias por esto ... es genial, pero no funciona en Chrome (bien en Firefox) – user991830

+2

@ user991830 no admite negrita para los elementos 'option', pero la pseudo-clase funciona. Compruebe este ejemplo que cambia el color http://jsfiddle.net/sqshN/1/ – Sotiris

+0

[Windows] Chrome nunca ha permitido el estilo desplegable porque usa la API de OSes. Recuerdo una discrepancia así al tratar de lograr algo similar. – lpd

26

En realidad no se puede.

El más cercano cosa (no se puede seleccionar un elemento en negrita)

<optgroup label="Swedish Cars"> 
    <option value="volvo">Volvo</option> 
    <option value="saab">Saab</option> 
    </optgroup> 
    <optgroup label="German Cars"> 
    <option value="mercedes">Mercedes</option> 
    <option value="audi">Audi</option> 
    </optgroup> 

que le da esto: enter image description here

http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_optgroup

También es posible construir una propia pero no se ingresará una etiqueta de entrada (debe usar sus propias entradas).

+1

+1 No diría "no se puede" (ver respuesta por @Sotiris), pero creo que esta es la respuesta más adecuada para la pregunta de los consultores, ya que parece que deberían estar usando la agrupación para empezar con –

+0

@MyHeadHurts para mí, si no funciona en todos los navegadores, no lo uso. también deberías pensar como tat como desarrollador web. –

+0

Aunque estoy de acuerdo en la mayoría de los niveles con eso, me complace dejar que el cliente defina qué tan atrás ellos quieren apoyar. Además, habrá una manera 2.0 de lograrlo, solo que al menos –

-1

Esto también funciona (Firefox 50 y Chrome 55) Los elementos 3 y 5 se muestran en negrita

<style> 
    .bld {font-weight:bold;} 
    </style> 
    <select> 
    <option value = 1>Kanakangi 
    <option value = 2>Ratnangi 
    <option class = bld value = 8>Hanumatthodi 
    <option value = 9>Dhenuka 
    <option class = bld value = 15>Mayamalavagowla 
    <option value = 16>Chakravaaham 
    </select> 
+0

Eso no funciona. –

+0

Funciona, simplemente pruébelo primero. –

0

Puede hacerlo con jQuery.

$('#Your select').append($("<option></option>").attr.css("font-weight" , "bold").html("Bold Text")); 

Tendría que agregar un poco de lógica para determinar qué opciones a negrita, obviamente.

Cuestiones relacionadas