2013-03-29 8 views
6

Vorrei creare un elenco a discesa selezionato per poter selezionare un carattere. In questo elenco, vorrei che ogni opzione di carattere fosse mostrata in quello stile come anteprima del font.Come creare un elenco a discesa dei caratteri di selezione con un'anteprima?

<select> 
    <option class="Times-New-Roman" value="Times-New-Roman">Times New Roman</option> 
    <option class="Verdana" value="Verdana">Verdana</option> 
    <option value="Comic-Sans-MS">Comic Sans MS</option> 
    <option value="WildWest">WildWest</option> 
    <option value="Bedrock">Bedrock</option> 
</select> 

Sopra è una goccia di base a tendina, di cui ogni tipo di carattere ha il proprio nome di classe, ma non riesco a capire come fare in modo che ogni nome di classe ha il proprio carattere che mostrerà nel menu `A tendina.

Grazie per il tempo speso nell'aiutare a trovare una soluzione.

migliori saluti, Tim

+2

Forse qualcosa di simile? http://www.jankoatwarpspeed.com/reinventing-a-drop-down-with-css-and-jquery/ Ho creato fiddle da questo esempio (http://jsfiddle.net/h7YqN/), guarda l'ultimo opzione dal menu a discesa, c'è Comic Sans MS. Cerca di evitare lo styling dell'elemento "select", non puoi farlo in ogni browser. Invece, utilizzare questo codice o qualsiasi altro codice per riprodurre l'effetto del menu a discesa. È inoltre possibile estendere questo codice e applicare valori agli input nascosti, se è necessario ottenere il valore selezionato tramite il modulo. –

+0

Ricorda solo che non è possibile riprogettare la lista "seleziona". È necessario utilizzare JavaSrcipt o jQuery per simulare l'elenco "seleziona" con "li" o simile. Ci sono molti script per farlo. –

risposta

3

formato prova come qui di seguito.

<select> 
    <option style="font-family:'Times New Roman';" class="Times-New-Roman" value="Times-New-Roman">Times New Roman</option> 
    <option style="font-family:Verdana, Geneva, sans-serif;" class="Verdana" value="Verdana">Verdana</option> 

Problemi correlati