¿Hay alguna forma de tener líneas múltiples en un elemento <option>?¿Puede tener varias líneas en un elemento <option>?
De esta manera:
-------------------------
| Normal <option> element |
-------------------------
| <option> element broken |
| onto two lines |
-------------------------
| Normal <option> element |
-------------------------
¿Hay alguna enfoque HTML/CSS, o debería utilizar JavaScript?
Es un caso particular de mostrar etiquetas HTML dentro de un elemento <option></option>. Hasta donde yo sé, los navegadores se comportan de manera muy diferente en esta área (Firefox muestra incluso imágenes, otros navegadores ignoran la mayoría o todas las etiquetas) y no existe una solución de navegador cruzado. Probablemente necesites emularlo con JavaScript y un marcado diferente.
En http://www.w3.org/TR/2011/WD-html-markup-20110113/option.html dicen:
contenidos permitidos: carácter normal datos
... que se define en http://www.w3.org/TR/2011/WD-html-markup-20110113/syntax.html#normal-character-data
La especificación es difícil de entender, como de costumbre, pero entiendo que no puede insertar un literal < (es decir, una etiqueta HTML como <br>). No puedo encontrar dónde define el comportamiento con espacio en blanco, pero la mayoría de los navegadores parecen colapsarlo.
El problema con las selecciones es que son elementos del formulario del sistema operativo en lugar de elementos del formulario web. Es por eso que no es posible diseñarlos en algunos navegadores (tos ... IE6) a diferencia de otras entradas. ¿Has visto un ejemplo de esto en cualquier lugar? Como el sistema operativo no se adapta a esto, el navegador tampoco lo hará.
También me gustaría señalar que no es muy fácil de usar. Los usuarios están acostumbrados a la idea de un cuadro de selección que contiene opciones en líneas individuales. Si comienza a ponerlos en varias líneas, va en contra de la usabilidad y accesibilidad inherente del cuadro de selección. Puede que no sea una buena idea tomar esta ruta.
Solo mi opinión, pero espero que tenga sentido.
Como esta respuesta tiene casi 3.5 años, agregaría ahora que existen numerosas bibliotecas JS para cambiar el estilo del cuadro de selección. Algunos de estos, debido a su propia naturaleza, obligarán a seleccionar opciones en dos líneas. Si esto sigue siendo una preocupación para la gente, entonces esta podría ser una opción. Solo tenga en cuenta que muchas libs de estilo no son compatibles con iOS o Android. – tadywankenobi
Me temo que no. Los navegadores parecen ignorar los caracteres de nueva línea y las etiquetas HTML <br> dentro de los elementos <option>, y no creo que JavaScript proporcione ninguna forma de manipular cómo aparece este texto.
No, tendrá que crear una lista desplegable personalizada para tal cosa.
jQuery ofrece muchos de estos; probablemente pueda usar CSS para definir height para opciones específicas para lograr lo que necesita.
Esto puede no ser lo que quiera, pero usted puede obtener dos líneas por cada opción, mediante el uso de la etiqueta "optgroup" por ejemplo:
<select>
<optgroup label="Click below for 'yes'">
<option value="yes">Yes</option>
</optgroup>
<optgroup label="Click below for 'No'">
<option value="no">No</option>
</optgroup>
</select>
Esto no permitirá que UNA opción se separe en DOS líneas –
HotKey, estrictamente hablando, tiene razón. Lo que sugerí da el efecto de dividir una opción en dos líneas (ver http://jsfiddle.net/elusien/Sqc6Z/). Cualquiera que sea la opción que el usuario elija, solo se devuelve la segunda línea. En mi defensa, dije que esto no es lo que se quiere. – Neil
En realidad, tiene idea de dividir la opción y diferir un grupo no parece ser una mala idea. Pero al decirlo, ¿cómo funcionaría con una fuente de datos? –
lo que es media por varias líneas en un elemento opción? – Vivek
normalmente tiene una línea en un elemento de opción que seleccione, quiero tener dos líneas en ese elemento, por ejemplo, cada opción tiene 2 líneas –
Utilice Javascript. –