Ho un menu a discesa che elenca le famiglie di caratteri. Come Tahoma, Arial, Verdana, ecc. Voglio cambiare la famiglia di font di ciascun elemento a discesa in base al valore che rappresenta. Proprio come Photoshop lo fa.Come modificare la famiglia di caratteri dell'elenco di riepilogo a discesa?
Ho modificato il CSS per ogni elemento a discesa ma funziona solo su FireFox. Non funziona su nessun altro browser.
Non voglio usare alcun plugin jQuery.
Questo perché il select elementi figli (option s) non sono davvero stylable e Firefox sembra essere l'unico browser a ignorare quella parte della specifica.
La soluzione è sostituire l'elemento select con un widget personalizzato che utilizza solo elementi stylable e forse un piccolo javascript per l'interattività. come ciò che è fatto qui:
http://jsfiddle.net/sidonaldson/jL7uU/
o http://jsfiddle.net/theredhead/4PQzp/
<select>
<option style="font-family: 'Comic Sans MS'">Comic Sans MS</option>
<option style="font-family: Arial">Arial</option>
<option style="font-family: 'Times New Roman'">Times New Roman</option>
</select>
è possibile o attraverso questo sito u otterrà un'idea
Enjoy :)
grazie
Cosa si può fare in CSS è quello che hai descritto: impostazione font-family su option elementi, e questo ha un supporto limitato per il browser. I browser possono implementare gli elementi select utilizzando routine che sono parzialmente o completamente immuni ai CSS.
La soluzione alternativa consiste nell'utilizzare qualcos'altro di un elemento select, ad esempio un set di pulsanti di opzione, ma verrà ovviamente reso in modo diverso da un menu a discesa. Quindi puoi usare per es.
<div><input type="radio" name="font" value="Tahoma" id="tahoma">
<label for="tahoma" style="font-family: Tahoma">Tahoma</label></div>
...
Questo dovrebbe dare un'idea di Ho per raggiungere questo obiettivo:
<select>
<option value="Arial">First</option>
<option value="Verdana">Second</option>
</select>
$(function() {
$('select > option').hover(function() {
$(this).parent().css({fontFamily:$(this).val()})
})
})
ha detto che non vuole usare jquery. – khurram
Sarebbe la pena di prendere in considerazione se fosse cross-browser, ma non ha funzionato in Chrome quando ho provato solo ora. –
Prova questa:
<html>
<head>
<style>
.styled-select {
overflow: hidden;
height: 30px;
}
.styled-select select {
font-size: 14pt;
font-family:"Times New Roman",Times,serif;
height: 10px;
}
</style>
<title></title>
</head>
<body>
<div class="styled-select">
<select>
<option selected="selected" >One</option>
<option >Two</option>
</select>
</div>
</body>
</html>
È possibile impostare i caratteri per una discesa HTML nel seguente modo:
1. costruire la vostra lista di opzioni che verranno desplayed nel menu a discesa, ma non applicare stili/classi a nessuna di queste opzioni. In PHP memorizzerei la mia lista di opzioni su una variabile e poi userei quella variabile per aggiungere opzioni al mio menu a discesa che mostrerò qui sotto.
2. Quando si desidera inserire in realtà la discesa nella pagina, utilizzare il tag SELECT e mettere un po 'stile CSS all'interno di quel tag, come ho mostrato qui di seguito:
<SELECT style='font-size: 10px; font-family: "Verdana", Sans-Serif;' name='???????'>
<?php echo $your_variable_containing_dropdown_content; ?>
</SELECT>
che funziona al 100% bene per me in il sito Web al quale sto lavorando attualmente. Questo è solo lo stile che ho usato nella mia pagina, ma può essere qualsiasi cosa tu abbia bisogno di essere.
Firefox non sta violando le specifiche. Piuttosto, le specifiche non parlano del fatto che gli elementi 'option' siano stilizzabili (anche se la naturale aspettativa è che possano essere disegnati come qualsiasi altro elemento, ma le implementazioni usano spesso tecnologie che non lo consentono). –
Ricordo di aver letto che i controlli del modulo dovrebbero essere nativi della piattaforma. Non riesco a trovare dove leggo quello, però, e potrei semplicemente sbagliarmi su dove l'ho letto. Tuttavia, la maggior parte dei browser utilizza i controlli di moduli nativi della piattaforma per quanto posso dire. – Kris
http://jsfiddle.net/sidonaldson/jL7uU/ link non funziona –