Stil Dropdown-Menü auswählen in CSS

1. Verwenden Sie appearance:none, um den Standardpfeil auszublenden und einen benutzerdefinierten Pfeil im Auswahlmenü in CSS festzulegen
2. Verwenden Sie overflow:hidden, um den Standardpfeil auszublenden und einen benutzerdefinierten Pfeil im Auswahlmenü in CSS festzulegen

In diesem Artikel stellen wir einige Methoden vor, um das Auswahl-Dropdown-Menü in CSS zu gestalten.

Verwenden Sie appearance:none, um den Standardpfeil auszublenden und einen benutzerdefinierten Pfeil im Auswahlmenü in CSS festzulegen

Wir können das Auswahl-Dropdown-Menü nur mit CSS gestalten, indem wir den Standardpfeilsatz ausblenden und einen benutzerdefinierten Pfeilsatz hinzufügen. Es gibt eine CSS-Eigenschaft appearance, die das Styling eines Elements basierend auf dem Betriebssystem definiert. Die mit der Eigenschaft appearance angewendeten Stile sind plattformnativ. Wir können diese Eigenschaft auf dem select-Tag verwenden und den Pfeil im Dropdown-Menü definieren. Die Option none in der Eigenschaft appearance blendet den Standardpfeil aus der Dropdown-Liste aus. Dann können wir unseren benutzerdefinierten Pfeil hochladen. Wir können die Eigenschaften -webkit-appearance und -moz-appearance in den WebKit-basierten und Blink-basierten Browsern verwenden.

Erstellen Sie beispielsweise eine Dropdown-Liste mit den Tags select und option in HTML. Schreiben Sie Optionen Ihrer Wahl. Wählen Sie in CSS das select-Tag aus und stellen Sie die verschiedenen Eigenschaften wie margin, width, height, padding, font-size, border ein. Verwenden Sie als nächstes die Eigenschaft appearance und setzen Sie sie auf none. Verwenden Sie dann die Abkürzungseigenschaft background, um den benutzerdefinierten Pfeil festzulegen. Verwenden Sie die Funktion url(), um das Bild auszuwählen. Gestalten Sie das Bild mit Eigenschaften wie background-repeat, background-size und background-color. Verwenden Sie die Option no-repeat, um das Bild einmal anzuzeigen. Stellen Sie die Position auf 100% und Hintergrundgröße auf 15%.

Daher haben wir ein Dropdown-Menü mit CSS gestaltet.

Beispielcode:

<select>
 <option>RE Himalayan</option>
 <option selected>CRF Rally</option>
 <option>GS 310</option>
 <option>KTM ADV</option>
</select>

select {
 margin: 40px;
 width: 160px;
 padding: 4px 30px 4px 4px;
 font-size: 14px;
 border: 1px solid #eee;
 height: 30px;
 -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none;
 background: url(/img/DelftStack/logo.png) 100% / 15% no-repeat #ccc;
}

Verwenden Sie overflow:hidden, um den Standardpfeil auszublenden und einen benutzerdefinierten Pfeil im Auswahlmenü in CSS festzulegen

Wir können das select-Tag mit einem div umschließen und seinen overflow auf hidden setzen, um den Standardpfeil im Dropdown-Menü auszublenden. Dann können wir unseren benutzerdefinierten Pfeil hinzufügen, genau wie bei der ersten Methode. Die Eigenschaft overflow, die auf hidden gesetzt ist, schneidet den Überlauf im Container ab. Der Rest des Inhalts wird ausgeblendet. Wir werden die Breite des div kleiner als das Dropdown-Menü definieren. Der Pfeil im Dropdown-Menü fällt also außerhalb des Containers, wenn der Wert hidden in der Eigenschaft overflow verwendet wird. Schließlich können wir unseren benutzerdefinierten Pfeil hinzufügen.

Erstellen Sie beispielsweise ein div mit der Klasse menu. Schreiben Sie in das div die gleichen Dropdown-Elemente wie in der ersten Methode. Wählen Sie in CSS das Tag select aus, das ein Nachkomme der Klasse menu als .menu select ist, und wenden Sie die Stile an. Stellen Sie den Hintergrund auf transparent. Erstellen Sie die width von 140px. Stellen Sie font-size auf 14px und erstellen Sie einen Rahmen. Stellen Sie die Höhe des Menüs auf 35px ein. Wählen Sie als nächstes die Klasse menu und geben Sie den Rand 40px, die Breite 125px und die Höhe 34px an. Stellen Sie sicher, dass die Breite des Containers kleiner ist als das Menü. Als nächstes stellen Sie overflow auf hidden und stellen Sie das Hintergrundbild als erste Methode ein.

Hier haben wir den Standardpfeil aus dem Dropdown-Menü entfernt und einen benutzerdefinierten Pfeil hinzugefügt. So können wir das Auswahl-Dropdown-Menü in CSS gestalten.

Beispielcode:

<div class="menu">
 <select>
 <option>RE Himalayan</option>
 <option selected>CRF Rally</option>
 <option>GS 310</option>
 <option>KTM ADV</option>
 </select>
</div>

.menu select {
 background: transparent;
 width: 140px;
 font-size: 14px;
 border: 1px solid #eee;
 height: 35px; 
} 
.menu{
 margin: 40px;
 width: 125px;
 height: 34px;
 border: 1px solid black;
 overflow: hidden;
 background: url(/img/DelftStack/logo.png) 100% / 15% no-repeat #ccc;
}