Simulare il tag select con Javascript ed i CSS

In fase di stilizzazione dei form con i CSS sappiamo che, purtroppo, non è possibile intervenie sulle caselle generate col tag select per "renderle piatte", ma sappiamo anche che, dove i comandi di default non arriva, può arrivare l'ingegno e simulare quel che non è stato esplicitamente previsto da chi ha creato i browser ed i linguaggi per il design.

Per ottenere una select piatta non possiamo usare una select, ma dobbiamo simularla.

Creiamo la select... senza select!

Il seguente è un esempio di codice HTML che, una volta stilizzato con i CSS e reso funzionale con Javascript, avrà l'aspetto che tanto bramiamo abbia una tradizionale select di un form HTML:

<form name="modulo">
    <input type="hidden" name="valore">
    <div id="valore">
        <div id="vuoto" onclick="ApriValori()"></div>
        <div id="valori">
            <a href="javascript:Valore('')"></a>
            <a href="javascript:Valore('1')">Valore # 1</a>
            <a href="javascript:Valore('2')">Valore # 2</a>
            <a href="javascript:Valore('3')">Valore # 3</a>
            <a href="javascript:Valore('4')">Valore # 4</a>
            <a href="javascript:Valore('5')">Valore # 5</a>
            <a href="javascript:Valore('6')">Valore # 6</a>
            <a href="javascript:Valore('7')">Valore # 7</a>
            <a href="javascript:Valore('8')">Valore # 8</a>
            <a href="javascript:Valore('9')">Valore # 9</a>
            <a href="javascript:Valore('10')">Valore # 10</a>
            <a href="javascript:Valore('11')">Valore # 11</a>
            <a href="javascript:Valore('12')">Valore # 12</a>
            <a href="javascript:Valore('13')">Valore # 13</a>
            <a href="javascript:Valore('14')">Valore # 14</a>
            <a href="javascript:Valore('15')">Valore # 15</a>
        </div>
    </div>
</form>

Innanzitutto creiamo davvero un form e ci mettiamo dentro una casella di testa nascosta, in modo da andare ad inserirvi il valore che sarà selezionato dalla nostra pseudo select.

Creiamo poi l'elenco dei valori della select all'interno di una serie di elementi di testo nidificati, che andiamo a stilizzare, fino ad ottenere il seguente risultato:

Il funzionamento sarà davvero identico a quello di di una tradizionale select di un form HTML, ma sarà stilizzata come vogliamo noi!

Cliccando sulla select si aprirà il menu, selezioneremo la voce, vedremo la voce selezionata una volta chiusa la select ed andremo a valorizzare la casella di testo nascosta col valore selezionato, in modo da poter gestire il valore in questione nella nostra applicazione Web.

Notiamo, in fine, che gestiamo all'evento click l'apertura della select e, valore per valore, chiamiamo una funzione Javascript che, come vedremo, andrà a valorizzare la casella di testo nascosta.

• <<
• 1
• 2
• 3
• >>