webentwicklung-frage-antwort-db.com.de

Wie kann man die Schriftfamilie des Listenelements ändern?

Ich habe eine Dropdown-Liste, in der die Schriftfamilien aufgelistet sind. Wie Tahoma, Arial, Verdana usw. möchte ich die Schriftfamilie jedes Dropdown-Elements entsprechend dem Wert ändern, den es darstellt. Genauso wie Photoshop es tut.

Ich habe das CSS für jedes Dropdown-Element geändert, aber es funktioniert nur bei FireFox. Bei anderen Browsern funktioniert das nicht.

Ich möchte kein jQuery-Plugin verwenden.

19
Mohal

Das liegt daran, dass die untergeordneten Elemente (selects) der option-Elemente nicht wirklich ansprechbar sind und Firefox der einzige Browser zu sein scheint, der diesen Teil der Spezifikation ignoriert.

Die Problemumgehung besteht darin, Ihr select-Element durch ein benutzerdefiniertes Widget zu ersetzen, das nur anpassbare Elemente und möglicherweise ein wenig Javascript für die Interaktivität verwendet. wie was hier gemacht wird: http://jsfiddle.net/sidonaldson/jL7uU/ oder http://jsfiddle.net/theredhead/4PQzp/

13
Kris

Sie können Schriftarten für ein HTML-Dropdown-Menü auf folgende Weise festlegen:
1. Erstellen Sie eine Liste mit Optionen, die in der Dropdown-Liste angezeigt werden. Wenden Sie jedoch kein Styling oder keine Klassen auf diese Optionen an. In PHP würde ich meine Liste von Optionen in einer Variablen speichern und dann diese Variable verwenden, um Optionen zu meiner Dropdown-Liste hinzuzufügen, die ich unten zeigen werde.
2. Wenn Sie die Dropdown-Liste tatsächlich in die Seite einfügen möchten, verwenden Sie das SELECT-Tag und fügen Sie CSS-Stil in dieses Tag ein, wie ich es unten gezeigt habe:

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

Das funktioniert zu 100% für mich auf der Website, an der ich gerade arbeite. Dies ist nur das Styling, das ich auf meiner Seite verwendet habe, es kann jedoch so sein, wie Sie es brauchen.

1
craig-c

Sie können so etwas tun

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

0
Kazi Hasan Ali