it-swarm.com.de

Anwenden eines CSS-Stils auf die Dropdown-Liste

Ich habe eine PHP -Funktion, um alle meine benutzerdefinierten Taxonomien in einer Dropdown-Liste anzuzeigen, aber mir gefällt der Dropdown-Menüstil nicht. Ich möchte das Aussehen ändern. Wie kann ich das Aussehen anpassen?

1
Niraj Chauhan

Die Standard-Dropdown-Menüs in HTML werden von <select> -Tags behandelt. Hier ist ein guter Artikel, der zeigt, wie <select> Tags formatiert werden .

Der Artikel besagt, dass die meisten Teile einfach so gestaltet werden können wie andere HTML-Elemente. Es ist einfach, Schriftart, Größe, Ränder, Hintergrund, Farbe usw. zu ändern. Das einzige Element, das sich nur schwer browserübergreifend formatieren lässt, ist der Abwärtspfeil, mit dem der Benutzer das Dropdown-Menü verwenden kann.

Um das zu stylen, musst du einige Tricks anwenden:

  • Umgeben Sie den <select> mit einem <div>.
  • Stellen Sie den Hintergrund des <select> auf "transparent".
  • Verwenden Sie ein Bild Ihres eigenen Pfeils als Hintergrund für den umgebenden <div>.
2

Nun, das ist in diesem Zusammenhang nicht leicht zu beantworten. Im Wesentlichen müssen Sie die CSS-ID und die Klassen aus dem HTML-Code Ihres Menüs abrufen und diese mit dem CSS verweisen.

Im CSS können Sie dann mit der dargestellten ID und den dargestellten Klassen beliebige Aktionen ausführen, um das Erscheinungsbild anzupassen. Offensichtlich gibt es viele Fallstricke. Machen Sie also eine Sicherungskopie, bevor Sie anfangen, herumzuspielen.

Alternativ können Sie auch eine vorgefertigte Lösung verwenden. In diesem Fall finden Sie in CSS-Menüs oder CSS-Wiedergabe einige gute Ideen.

1
Paul