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
HTML-Tutorial: Horizontales Liniensegment in HTML
<br />Dieses Tag kann eine horizontale Linie...
Beheben Sie den abnormalen Fehler beim Erstellen einer Vue-Umgebung mit Webpack
Inhaltsverzeichnis Konfigurieren Sie zuerst packa...
CSS-Implementierungscode für mehrstufige Menüs
Dies ist eine ziemlich coole Funktion, die Websei...
CSS entfernt die Hintergrundfarbe von Elementen, die beim Anklicken auf dem mobilen Endgerät generiert werden (empfohlen)
Füge im CSS-Style des Elements, welches die Hinte...
Detaillierte Erklärung der Kommunikation zwischen hierarchisch verschachtelten Komponenten in der Vue-Frontend-Entwicklung
Inhaltsverzeichnis Vorwort Beispiel Zusammenfassu...
Details zu verschiedenen Schriftformaten in HTML-Webseiten
Dieser Abschnitt beginnt mit den Details der Text...
Installieren Sie MySQL 5.7.17 im Win10-System
Das Betriebssystem Win10 MySQL ist die 64-Bit-ZIP...
CentOS verwendet lokale Yum-Quellen zum Erstellen einer LAMP-Umgebung – Grafik-Tutorial
Dieser Artikel beschreibt, wie Sie mit der lokale...
Vergleich der Effizienz zwischen Einzeltabellenabfrage und Mehrtabellen-Joinabfrage in der MySql-Datenbank
Während dieser Zeit stieß ich bei der Arbeit an e...
Detaillierte Erklärung der integrierten Methoden des Javascript-Arrays
Inhaltsverzeichnis 1. Array.at() 2. Array.copyWit...
Das Problem, dass beim Verbinden mit der MySQL-Datenbank in Idea chinesische Zeichen verstümmelt erscheinen
Problem: Bei Verwendung von JDBC zur Verbindung m...
Detaillierte Erläuterung der Komponentenentwicklung des Vue-Dropdown-Menüs
In diesem Artikelbeispiel wird der spezifische Co...
Detaillierte Beschreibung des MySQL-Ersetzens in der Verwendung
Die Ersetzungsanweisung ähnelt im Allgemeinen der...
Detaillierte Diskussion mehrerer Methoden zur Deduplizierung von JavaScript-Arrays
Inhaltsverzeichnis 1. Deduplizierung einrichten 2...
Verwenden von VMware IOInsight zur Durchführung einer verfeinerten Überwachung der Speicherleistung virtueller Maschinen
veranschaulichen: VMware IOInsight ist ein Tool, ...