web-dev-qa-db-fra.com

Comment changer l'élément de la liste déroulante Font-Family of?

J'ai un menu déroulant qui répertorie les familles de polices. Comme Tahoma, Arial, Verdana, etc. Je souhaite modifier la famille de polices de chaque élément déroulant en fonction de la valeur qu'il représente. Tout comme Photoshop le fait.

J'ai changé le CSS pour chaque élément déroulant mais cela ne fonctionne que sur FireFox. Cela ne fonctionne sur aucun autre navigateur.

Je ne veux utiliser aucun plugin jQuery.

htmlcssselectdrop-down-menu
19
Mohal

En effet, les select éléments children (options) ne sont pas vraiment stylables et Firefox semble être le seul navigateur à ignorer cette partie de la spécification.

La solution de contournement consiste à remplacer votre élément select par un widget personnalisé qui utilise uniquement des éléments stylables et peut-être un peu de javascript pour l'interactivité. comme ce qui se fait ici: http://jsfiddle.net/sidonaldson/jL7uU/ ou http://jsfiddle.net/theredhead/4PQzp/

13
Kris

Vous pouvez définir les polices pour une liste déroulante HTML de la manière suivante:
1. Construisez votre liste d’options qui seront affichées dans votre liste déroulante, mais n’appliquez pas de styles/classes à ces options. Dans PHP, je stockais ma liste d'options dans une variable, puis j'utilisais cette variable pour ajouter des options à ma liste déroulante, que je montrerai ci-dessous .
2. Lorsque vous souhaitez réellement insérer le menu déroulant dans la page, utilisez la balise SELECT et insérez un style CSS dans cette balise, comme indiqué ci-dessous:

<SELECT style='font-size: 10px; font-family: "Verdana", Sans-Serif;' name='???????'>
<?php echo $your_variable_containing_dropdown_content; ?>
</SELECT>

Cela fonctionne à 100% pour moi sur le site Web sur lequel je travaille actuellement. Ceci est juste le style que j'ai utilisé dans ma page, mais cela peut être ce que vous voulez.

1
craig-c

Vous pouvez faire quelque chose comme ça

<select>
<optgroup style="font-family:arial">
    <option>Arial</option>
</optgroup>
<optgroup style="font-family:verdana">
    <option>veranda</option>
</optgroup>

0
Kazi Hasan Ali