Wie kann man eine <select> Box Drop-Down nur mit CSS erstellen

Es ist schon seit Langem schwierig, das Element <select> in allen Browsern zu erstellen.

Um das zu vermeiden, verwenden Sie z. B. Styling eines übergeordneten Elements, das Hinzufügen von Pseudoelementen und die Anwendung von JavaScript.

Ein vernünftiger Satz von Stilen, wie sich herausstellt, kann eine konsistente und attraktive Selectbox für neue Browser erstellen, während sie auch in älteren Browsern gut funktioniert.

Es gibt mehrere Elemente einer Selectbox, die wir stylen können, insbesondere width, height, font, border, color, padding, box-shadow und background color.

Sehen Sie sich ein Beispiel für ein gestyltes Auswahlfeld an.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .box {
      width: 120px;
      height: 30px;
      border: 1px solid #999;
      font-size: 18px;
      color: #1c87c9;
      background-color: #eee;
      border-radius: 5px;
      box-shadow: 4px 4px #ccc;
      }
    </style>
  </head>
  <body>
    <p>Eine einfache Selectbox:</p>
    <select>
      <option>Kaffee</option>
      <option>Tee</option>
      <option>Saft</option>
      <option selected>Cocktail</option>
    </select>
    <p>Eine gestylte Selectbox:</p>
    <select class="box">
      <option>Kaffee</option>
      <option>Tee</option>
      <option>Saft</option>
      <option selected>Cocktail</option>
    </select>
  </body>
</html>

Der lästige Dropdown-Pfeil bleibt jedoch konstant gleich. Es gibt keine direkte Möglichkeit, es zu gestalten, aber es gibt einige Tricks, mit denen man den Standard-Pfeil ändern kann. Lassen Sie uns die folgenden 3 Methoden besprechen.

1) Verwenden Sie appearance: none;

Um den Standardpfeil der Dropdown-Liste <select> auszublenden, stellen Sie die CSS-Eigenschaft appearance auf seinen Wert "none" ein und fügen Sie dann Ihren individuellen Pfeil mithilfe der Eigenschaft background hinzu.

Beachten Sie bitte, dass die Eigenschaft appearance immer noch als experimentelle Technologie betrachtet wird und Sie für eine maximale Browser-Kompatibilität die Präfixe -moz- (für Firefox) und -webkit- (für Chrome, Safari, Opera) verwenden müssen.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      select {
      width: 140px;
      height: 35px;
      padding: 5px 35px 5px 5px;
      font-size: 18px;
      border: 2px solid #ccc;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      background: url("/uploads/media/default/0001/02/f7b4d3d2ba3fe1d8518e6e63d7740e1e73921abf.png") 96% / 15% no-repeat #eee;
      }
      select::-ms-expand { 
      display: none; /* Standardpfeil im IE 10 und 11 entfernen */
      }
    </style>
  </head>
  <body>
    <select>
      <option>Kaffee</option>
      <option>Tee</option>
      <option>Saft</option>
      <option selected>Cocktail</option>
    </select>
  </body>
</html>

2) Verwenden Sie overflow: hidden;

Zuerst wird das Box-Element <select> in einen Container div mit fester Breite und overflow: hidden platziert. Geben Sie dann dem Element <select> eine Breite von mehr als 20 Pixeln, die größer ist als das Element <div>. Dadurch wird der standardmäßige Dropdown-Pfeil ausgeblendet (wegen overflow: hidden auf dem Container), und jetzt ist es möglich, ein Hintergrundbild auf der rechten Seite von <div> anzuwenden.

Diese Methode ist gut zu verwenden, da alle Browser effektiv overflow: hidden unterstützen.
Beachten Sie bitte, dass der Nachteil dieser Methode darin besteht, dass die Optionen optisch länger sind als das Selectmenü.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .mystyle select {
      background: transparent;
      width: 140px;
      height: 35px;
      border: 1px solid #ccc;
      font-size: 18px;
      } 
      .mystyle {
      width: 120px;
      height: 34px;
      border: 1px solid #111;
      border-radius: 3px;
      overflow: hidden;
      background: url("/uploads/media/default/0001/02/f7b4d3d2ba3fe1d8518e6e63d7740e1e73921abf.png") 96% / 20% no-repeat #ddd;
      }
    </style>
  </head>
  <body>
    <div class="mystyle">
      <select>
        <option>Kaffee</option>
        <option>Tee</option>
        <option>Saft</option>
        <option selected>Cocktail</option>
      </select>
    </div>
  </body>
</html>

3) Verwenden Sie pointer-events: none;

Die CSS-Eigenschaft pointer-events kann verwendet werden, um individuelle Dropdowns <select> zu erstellen, indem ein Element über den nativen Dropdown-Pfeil gelegt wird (um den benutzerdefinierten Pfeil zu erstellen) und Zeigerereignisse darauf verboten werden.

Diese Methode funktioniert gut und hat eine gute Browserunterstützung.
Internet Explorer (10 und frühere Versionen) unterstützt die Eigenschaft pointer-events nicht, was bedeutet, dass Sie auf den benutzerdefinierten Pfeil nicht klicken können. Ein weiterer Nachteil bei der Verwendung dieser Methode ist, dass Sie keinen Hover-Effekt oder Cursor für Ihr neues Pfeilbild definieren können, da die Pointer-Ereignisse einfach deaktiviert sind. (Sehen Sie ein Beispiel unten, das zeigt, wie man den Zeiger wiederherstellt, wenn pointer-events auf "none" eingestellt sind).

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .mybox {
      position: relative;
      display: inline-block;
      }
      select {
      display: inline-block;
      height: 30px;
      width: 150px;
      outline: none;
      color: #74646e;
      border: 1px solid #ccc;
      border-radius: 5px;
      box-shadow: 1px 1px 2px #999;
      background: #eee;
      }
      /* Select arrow styling */
      .mybox .myarrow{
      width: 23px;
      height: 28px;
      position: absolute;
      display: inline-block;
      top: 1px;
      right: 3px;
      background: url("/uploads/media/default/0001/02/f7b4d3d2ba3fe1d8518e6e63d7740e1e73921abf.png") right / 90% no-repeat #eee;
      pointer-events: none;
      }
    </style>
  </head>
  <body>
    <div class="mybox">
      <span class="myarrow"></span>
      <select>
        <option>Kaffee</option>
        <option>Tee</option>
        <option>Saft</option>
        <option selected>Cocktail</option>
      </select>
    </div>
  </body>
</html>

4) Verwenden Sie Interpunktionszeichen anstelle des Dropdown-Pfeils

Es ist ziemlich schön, Ihre bevorzugten Markierungen anstelle des lästigen Dropdown-Zeichens der Box <select> zu verwenden.

Platzieren Sie die Markierungen in der Eigenschaft content und stellen Sie die entsprechende Schriftart ein. Hier stellen wir "Consolas" und "monospace" ein. Anschließend müssen Sie die Satzzeichen mithilfe der CSS-Eigenschaft transform drehen.

Hier ist die Box <select> in ein Element <label> eingefügt, so dass wir einen Cursor dafür einstellen können, auch wenn die Eigenschaft pointer-events auf "none" eingestellt ist.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      select {
      width: 140px;
      height: 35px;
      padding: 4px;
      border-radius:4px;
      box-shadow: 2px 2px 8px #999;
      background: #eee;
      border: none;
      outline: none;
      display: inline-block;
      -webkit-appearance:none;
      -moz-appearance: none;
      appearance: none;
      cursor: pointer;
      }
      label {
      position: relative;
      }
      label:after {
      content:'<>';
      font: 11px "Consolas", monospace;
      color: #666;
      -webkit-transform: rotate(90deg);
      -moz-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
      transform: rotate(90deg);
      right: 8px; 
      top:2px;
      padding: 0 0 2px;
      border-bottom: 1px solid #ddd;
      position: absolute;
      pointer-events: none;
      }
      label:before {
      content: '';
      right: 6px; 
      top:0px;
      width: 20px; 
      height: 20px;
      background: #eee;
      position: absolute;
      pointer-events: none;
      display: block;
      }
    </style>
  </head>
  <body>
    <label>
      <select>
        <option>Kaffee</option>
        <option>Tee</option>
        <option>Saft</option>
        <option selected>Cocktail</option>
      </select>
    </label>
  </body>
</html>