Heim > Web-Frontend > CSS-Tutorial > Hauptteil

CSS fügt Stil zur Auswahl (kein Skript) der Implementierung hinzu

yulia
Freigeben: 2018-09-10 16:13:53
Original
1361 Leute haben es durchsucht

Das Ändern des Standardstils von select erfolgt normalerweise durch UL- und LI-Simulation. Es gibt viele JQuery-Plug-Ins, die den Standardstil von select auf diese Weise ändern.
Laut dem Feedback des Programmierers kann diese Methode nach dem Absenden des Formulars keine Daten abrufen. Später wurden nach Experimenten verschiedene JS/Jquery-Plug-Ins verwendet, aber das Ergebnis war das gleiche: Daten konnten nicht abgerufen werden.

Später habe ich einen von einem Ausländer geschriebenen Blog gelesen. Ich habe CSS-Stile verwendet, um ein Div außerhalb der Auswahl hinzuzufügen. Ich habe die Breite des ausgewählten Divs kleiner eingestellt als die Breite des übergeordneten Divs Wählen Sie den Standardpfeilstil aus, indem Sie das Hintergrundattribut des Div festlegen. Diese Methode ist eine gute Methode, ohne Skripte schreiben zu müssen und nur einfaches CSS zu verwenden.

Diese Methode weist jedoch auch Mängel auf, d. h. unter der IE-Serie wird bei der Auswahl einer Option ein Hintergrundfarbblock angezeigt. IE7-IE10 haben diesen Fehler.
Unter Opera ist das Hintergrundbild des Div so eingestellt, dass es nicht angezeigt wird, d. h. der Dropdown-Pfeil der Auswahl wird nicht angezeigt. Ich kenne den Grund dafür nicht.

HTML-Code:

<div class="select_style"> 
<select name="select"> 
<option>AAAAAAAAAAA</option> 
<option>BBBBBBBBBBB</option> 
<option selected>CCCCCCCCCCC</option> 
<option>DDDDDDDDDDD</option> 
</select> 
</div>
Nach dem Login kopieren

CSS-Code:

.select_style {width:240px; height:30px; overflow:hidden; background:url(../images/arrow.png) no-repeat 215px; 
border:1px solid #ccc; 
-moz-border-radius: 5px; /* Gecko browsers */ 
-webkit-border-radius: 5px; /* Webkit browsers */ 
border-radius:5px; 
} 
.select_style select { padding:5px; background:transparent; width:268px; font-size: 16px; border:none; height:30px; 
-webkit-appearance: none; /*for Webkit browsers*/ 
}
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonCSS fügt Stil zur Auswahl (kein Skript) der Implementierung hinzu. 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
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!