Desplegables horizontales en HTML

30 03 2010

Hace unos días en el trabajo, mientras aplicaba estilos a un input select de un formulario en un documento HTML, cometí un error al aplicar un estilo in-line, encontrándome con esto:

Select horizontal

Select horizontal

Mi reacción fue reirme, dado que nunca había visto un desplegable de esta forma pero, ¿qué sucedió?

Bien, la cuestión es que en lugar de aplicar la propiedad de estilo css display:inline al elemento select, lo apliqué al alemento option de ese select, con lo que la siguiente opción se coocó justo a continuación y no debajo, como está estabecido por defecto (display:block).

Intrigado, me pregunté si sería posible disponer las opciones de un desplegable como una matriz y la conclusión es que sí se puede.

La solución es mezclar la aplicación errónea del estilo display:inline con el uso de elementos optgroup. Cada optgroup será una fila de nuestra matriz de opciones y cada opción dentro de cada fia tendrá aplicado un estilo display:inline. Como por defecto los elementos HTML se muestran como block, cada fila (optgroup) se mostrará debajo de la anterior y dentro de ellas, cada opción, al tener aplicado estilo display:inline, se mostrará justo al lado de la anterior 🙂

Así podemos construir de una forma sencillísima cosas como esta:

Select matricial

Select matricial

El código HTML correspondiente es el siguiente:

<select id="selectMatricialDesplegable" size="1">
    <optgroup>
        <option style="display:inline;">01</option>
        <option style="display:inline;">02</option>
        <option style="display:inline;">03</option>
        <option style="display:inline;">04</option>
        <option style="display:inline;">05</option>
        <option style="display:inline;">06</option>
        <option style="display:inline;">07</option>
    </optgroup>
    <optgroup>
        <option style="display:inline;">08</option>
        <option style="display:inline;">09</option>
        <option style="display:inline;">10</option>
        <option style="display:inline;">11</option>
        <option style="display:inline;">12</option>
        <option style="display:inline;">13</option>
        <option style="display:inline;">14</option>
    </optgroup>
    <optgroup>
        <option style="display:inline;">15</option>
        <option style="display:inline;">16</option>
        <option style="display:inline;">17</option>
        <option style="display:inline;">18</option>
        <option style="display:inline;">19</option>
        <option style="display:inline;">20</option>
        <option style="display:inline;">21</option>
    </optgroup>
    <optgroup>
        <option style="display:inline;">22</option>
        <option style="display:inline;">23</option>
        <option style="display:inline;">24</option>
        <option style="display:inline;">25</option>
        <option style="display:inline;">26</option>
        <option style="display:inline;">27</option>
        <option style="display:inline;">28</option>
    </optgroup>
</select>

No es nada espectacular pero mola. Espero que os sirva.








A %d blogueros les gusta esto: