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

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>

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*/ 
}

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!