Problemas de Chrome con display-inline para <select><option> tags

Tengo un problema donde no puedo obtener el mismo código CSS para renderizarlo en Firefox y Chrome. En lugar de un cuadro de selección vertical de 24 valores, todos ellos aparecen en una línea uno al lado del otro en Firefox:Problemas de Chrome con display-inline para <select><option> tags

En Chrome, aparecen como una caja de selección múltiple vertical.

código completo de un ejemplo abreviado de 3 horas:

<html> 
    <head> 
    <style type="text/css"> 
     option { display: inline; } 
    </style> 
    </head> 
    <body> 
    <form> 
     <select id="aryHours[]" class="select_hours" size="1" multiple="multiple" name="aryHours[]"> 
     <option value="1">1</option> 
     <option value="2">2</option> 
     <option value="3">3</option> 
     </select> 
    </form> 
    </body> 
</html>

En Chrome, las opciones no se muestran en línea.

¿Alguna explicación de por qué este código funciona o no y hay otras formas de lograr el mismo diseño?

Fuente

2012-08-31 dsh

No creo que deba (¿puede?) Hacer <option> elementos en línea de esa manera. Intenta usar casillas de verificación en su lugar. Algo así como this:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Inline Options</title> 
    <style> 
     ul { 
      list-style:none;overflow:hidden; 
     } 
     ul li { 
      lit-style:none; 
      float:left; 
      position:relative; 
     } 
     ul li input[type="checkbox"] { 
      position:absolute; 
      top:0; 
      right:0; 
      bottom:0; 
      left:0; 
      width:100%; 
      height:100%; 
      opacity:0; 
     } 
     ul li input:checked + label { 
      background:blue; 
     } 
    </style> 
</head> 
<body> 
    <form action="#" method="get"> 
     <ul> 
      <li> 
       <input type="checkbox" name="aryHours[]" id="checkbox1" /> 
       <label for="checkbox1" class="">Option 1</label> 
      </li> 
      <li> 
       <input type="checkbox" name="aryHours[]" id="checkbox2" /> 
       <label for="checkbox2" class="">Option 2</label> 
      </li> 
      <li> 
       <input type="checkbox" name="aryHours[]" id="checkbox3" /> 
       <label for="checkbox3" class="">Option 3</label> 
      </li> 
     </ul> 
    </form> 
</body> 
</html>

Fuente

2012-08-31 18:16:20

Gracias por la respuesta. No estoy de acuerdo con que las opciones no se puedan hacer en línea: prueba mi código en FireFox. Dicho esto, este enfoque es inteligente y tiene la funcionalidad básica correcta. Sin embargo, hay varias diferencias funcionales que creo que son importantes. Como se trata de una selección múltiple, el usuario tiene la capacidad de mantener presionada la tecla Mayús y arrastrar durante las horas deseadas. En este ejemplo, el usuario debe seleccionar individualmente cada hora. En mi aplicación real, hay 24 opciones, no 3. Tener que hacer clic hasta 24 veces no es fácil de usar. – dsh

@dsh - Muy cierto, pero solo porque uno (o incluso más de un) navegador le permite salirse con la suya no significa que deba hacerlo. No estoy seguro de qué dirían las especificaciones, pero consideraría el hecho de que Firefox lo permite como sospechoso. Me refiero a '

Problemas de Chrome con display-inline para <select><option> tags

Respuesta