Heim > Web-Frontend > CSS-Tutorial > Tipps und Tricks zum Implementieren benutzerdefinierter Auswahlfelder mit CSS (Codebeispiel)

Tipps und Tricks zum Implementieren benutzerdefinierter Auswahlfelder mit CSS (Codebeispiel)

不言
Freigeben: 2018-11-06 10:36:48
Original
2194 Leute haben es durchsucht

Die meisten Leute werden es etwas mühsam finden, das Auswahlfeld zu formatieren, aber dieser Artikel wird Ihnen ein wenig helfen. Grundsätzlich können Sie die ursprüngliche Auswahl so weit wie möglich löschen und dann den Div-Umbruch zum Stylen verwenden (gilt für IE8 +). ), ohne weitere Umschweife, gehen wir direkt zum Text über.

Diese Methode scheint sehr einfach zu sein, Sie können den Stil entsprechend Ihren eigenen Bedürfnissen festlegen (empfohlener Kurs: CSS-Video-Tutorial)

Der Code lautet wie folgt:

HTML:

<div class="select-style">
  <select>
    <option value="city1">合肥</option>
    <option value="city2">南京</option>
    <option value="city3">芜湖</option>
    <option value="city4">杭州</option>
  </select></div>
Nach dem Login kopieren

CSS:

.select-style {
    border: 1px solid #ccc;
    width: 120px;
    border-radius: 3px;
    overflow: hidden;
    background: #fafafa url("image/greatwall.jpg") no-repeat 90% 50%;
    }
    .select-style select {
    padding: 5px 8px;
    width: 130%;
    border: none;
    box-shadow: none;
    background: transparent;
    background-image: none;
    -webkit-appearance: none;
    color: lightblue;
    }
    .select-style select:focus {
    outline: none;
    }
Nach dem Login kopieren

Der Effekt ist wie folgt:

Tipps und Tricks zum Implementieren benutzerdefinierter Auswahlfelder mit CSS (Codebeispiel)

Das obige ist der detaillierte Inhalt vonTipps und Tricks zum Implementieren benutzerdefinierter Auswahlfelder mit CSS (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage