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
Artikel empfehlen
Implementierungsbeispiel eines Videoplayers basierend auf Vue
Wenn der vorhandene Videoplayer die Anforderungen...
Linux (CentOS7) installiert Tomcat und legt Tomcat als Startobjekt fest (am Beispiel von Tomcat8).
Inhaltsverzeichnis Installieren Sie Tomcat Laden ...
Auszeichnungssprache - CSS-Layout
Klicken Sie hier, um zum Abschnitt „HTML-Tutorial“...
So verwenden Sie Dayjs zum Berechnen gängiger Daten in Vue
Bei der Verwendung von Vue zur Entwicklung von Pr...
Drei Möglichkeiten zur Kommunikation zwischen React-Komponenten (einfach und benutzerfreundlich)
Inhaltsverzeichnis 1. Kommunikation zwischen Elte...
Eine kurze Diskussion über den JavaScript-Bereich
Inhaltsverzeichnis 1. Geltungsbereich 1. Globaler...
Beispiel für eine Domänennamenüberprüfungsmethode für Betrieb und Wartung von Nginx
Beim Konfigurieren des Domänennamens der Schnitts...
Ein praktischer Bericht über die Prüfung und Bearbeitung doppelter MySQL-Datensätze vor Ort
Inhaltsverzeichnis Vorwort analysieren Daten insg...
Detaillierte Erläuterung der zugrunde liegenden Implementierung des absteigenden Index, einer neuen Funktion von MySQL 8
Was ist ein absteigender Index? Sie kennen sich v...
So speichern Sie Text und Bilder in MySQL
Große Textdatentypen in Oracle Clob-Langtexttyp (...
So erstellen Sie eine MySQL-Datenbank und unterstützen chinesische Schriftzeichen
Schauen wir uns zunächst die offizielle MySQL-Dok...
Der Unterschied zwischen absolutem und relativem Pfad bei der Webseitenerstellung
1. Absoluter Pfad Zunächst einmal bezieht sich de...
Vue implementiert die Lupenfunktion der Produktdetailseite
In diesem Artikel wird der spezifische Code von V...
So entschlüsseln Sie Linux-Versionsinformationen
Das Anzeigen und Interpretieren von Informationen...
Zusammenfassung häufig verwendeter Escape-Zeichen in HTML
Die in HTML häufig verwendeten Escape-Zeichen wer...