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
So überwachen und löschen Sie abgelaufene Sitzungen in Tomcat
Vorwort Ich habe zufällig entdeckt, dass die halb...
Eine kurze Diskussion darüber, ob MySQL eine Funktion ähnlich der nvl von Oracle haben kann
Verwenden Sie ifnull statt isnull isnull wird ver...
So gehen Sie mit Zeitzonenproblemen in Docker um
Hintergrund Als ich in diesen beiden Tagen Docker...
Vollständiges Installations- und Konfigurations-Tutorialdiagramm für das komprimierte MySQL 8.0.22-Paket (getestet und effektiv)
1. Laden Sie das Zip-Installationspaket herunter ...
MySQL kontrolliert die Anzahl der Versuche, falsche Passwörter einzugeben
1. So überwachen Sie MySQL-Deadlocks in Produktio...
Detaillierte Erläuterung der gespeicherten Prozeduren, Cursor und Transaktionsbeispiele von MySQL
Detaillierte Erläuterung der gespeicherten Prozed...
Unternehmenswebsite und Kolumnenwörterbuch Chinesisch-Englisch-Vergleich Freunde, die zweisprachige Unternehmenswebsites auf Chinesisch und Englisch erstellen, benötigen
Name Charakter Name Charakter Information Nachric...
Gründe und Lösungen für langsame MySQL-Abfragen, die beim Senden von Daten hängen bleiben
Weil ich ein Python-Programm geschrieben und inte...
Hinzufügen und Löschen von Tabelleninformationen mit Javascript
Erste Schritte mit JavaScript JavaScript ist eine...
Ubuntu 19.04 Installationstutorial (Schritte in Bild und Text)
1. Vorbereitung 1.1 Laden Sie VMware 15 herunter ...
Webentwickler sind besorgt über die Koexistenz von IE7 und IE8
Ich habe heute IE8 installiert. Als ich auf die M...
Lösung für das Vue-Datenzuweisungsproblem
Lassen Sie mich ein Problem zusammenfassen, mit d...
Beispiele für Optimierungstechniken zur Verbesserung der Effizienz langsamer Abfragen in MySQL IN-Anweisungen
Die Tabellenstruktur ist wie folgt. Es gibt nur 6...
Schnelles Verständnis des Vue-Routing-Navigationsschutzes
Inhaltsverzeichnis 1. Globale Wache 1. Globale Fr...
So fügen Sie Konfigurationsoptionen zum Discuz!-Forum hinzu
Discuz! Forum verfügt über zahlreiche Konfiguratio...