Reines CSS zum Hinzufügen von Stil zur ausgewählten Implementierung (kein Skript)

Ändern Sie den Standardstil der Auswahl, normalerweise wird dies durch ul,li zur Simulation erreicht.
Es gibt viele JQuery-Plug-Ins, die den Standardauswahlstil auf diese Weise ändern.
Laut Rückmeldung des Programmierers können mit dieser Methode nach dem Absenden des Formulars keine Daten abgerufen werden. Später wurden nach Experimenten verschiedene JS/JQuery-Plugins verwendet, und das Ergebnis war dasselbe: Die Daten konnten nicht abgerufen werden.

Später las ich den Blog eines Ausländers. Er verwendete CSS-Stil, um ein Div außerhalb der Auswahl hinzuzufügen, die Breite der Auswahl kleiner als die Breite des übergeordneten Divs festzulegen und dann den Stil des Standardpfeils der Auswahl zu ändern, indem er das Hintergrundattribut des Divs festlegte.
Diese Methode ist eine gute Methode. Sie erfordert kein Schreiben von Skripten, sondern verwendet zur Implementierung nur reines CSS.

Allerdings hat diese Methode auch Mängel. In der IE-Reihe wird bei Auswahl einer bestimmten Option ein Farbblock im Hintergrund angezeigt. IE7-IE10 haben alle diesen Fehler.
In Opera wird das Hintergrundbild des Div nicht angezeigt, d. h. der Dropdown-Pfeil der Auswahl wird nicht angezeigt. Ich weiß nicht, was der Grund dafür ist.
Der folgende Code

Code kopieren

Der Code lautet wie folgt:

<div Klasse="Stil auswählen">
<Name auswählen="Auswählen">
<option>AAAAAAAAAA</option>
<option>BBBBBBBBBB</option>
<ausgewählte Option>CCCCCCCCCC</option>
<option>DDDDDDDDDD</option>
</Auswählen>
</div>

Code kopieren

Der Code lautet wie folgt:

.select_style {Breite: 240px; Höhe: 30px; Überlauf: ausgeblendet; Hintergrund: URL (../Bilder/Pfeil.png) keine Wiederholung 215px;
Rand: 1px durchgezogen #ccc;
-moz-border-radius: 5px; /* Gecko-Browser */
-webkit-border-radius: 5px; /* Webkit-Browser */
Rahmenradius: 5px;
}
.select_style select { Polsterung: 5px; Hintergrund: transparent; Breite: 268px; Schriftgröße: 16px; Rahmen: keiner; Höhe: 30px;
-webkit-appearance: none; /*für Webkit-Browser*/
}

<<: Detaillierter Prozess der Installation und Bereitstellung von OnlyOffice in Docker

>>: MySQL stellt Daten über Binlog wieder her

Reines CSS zum Hinzufügen von Stil zur ausgewählten Implementierung (kein Skript)

Details zur Verwendung des Vue-Slots

Tutorial zu HTML-Tabellen-Tags (12): Rahmenstil-Attribut FRAME

Detaillierte Erklärung der berechneten Eigenschaften von Vue

Detaillierte Erläuterung möglicher Probleme bei der Konvertierung von Gleitkommadaten in Zeichendaten in MySQL

Mehrere CSS3-Tag-Abkürzungen (empfohlen)

Zusammenfassung der Erfahrungen mit der Web-Frontend-Entwicklung

Detailliertes Tutorial zur Neuinstallation von Python 3.6.6 auf CentOS 7.5

HTML+CSS+JavaScript zum Erreichen eines Beispielcodes für das Scrollen in einer Listenschleife

Zwei Möglichkeiten zum Erstellen von Docker-Images

Zusammenfassung der Tipps zur CSS-Verwendung

Artikel empfehlen

Mit CSS3 implementierter Gradienten-Folieneffekt

Mit CSS3 können Sie eine schwebende Wolkenanimation erzielen

So installieren Sie MySQL unter Linux (Yum und Quellcode-Kompilierung)

Nicht standardmäßiger Implementierungscode für die MySQL UPDATE-Anweisung

Zusammenfassung der allgemeinen Docker-Befehle und Tipps

JavaScript zum Erreichen eines einfachen Seiten-Countdowns

Wie können die Transaktionseigenschaften von MySQL InnoDB sichergestellt werden?

Lösung für das Problem, dass MySql immer das mySqlInstallerConsole-Fenster öffnet

Erläuterung der Lösung zur mobilen H5-Bildgenerierung in JavaScript

Beschränken Sie die Eingabe in HTML-Textfelder auf Zahlen und Dezimalstellen.

Implementierung der IP-Adresskonfiguration in Centos7.5

Detaillierte Erklärung zur Verwendung von Bussen in Vue

So erstellen Sie schnell ELK basierend auf Docker

Packetdrills prägnantes Benutzerhandbuch

Lösung für das Problem des MySQL-Master-Slave-Switch-Kanals