css adds style to select (no script) implementation

Change the default style of select, which is usually simulated by ul and li. There are many Jquery plug-ins that change the default style of select in this way.
According to the feedback from the program brother, this method cannot obtain data after the form is submitted. Later, after experiments, different JS/Jquery plug-ins were used, but the same result was obtained: data could not be obtained.

Later I read a blog written by a foreigner, using CSS style to add a div outside the select, set the width of the select to be smaller than the width of the parent div, and then change the select by setting the background attribute of the div The default arrow style. This method is a good method, without writing scripts, just using simple css.

However, this method also has flaws, that is, under the IE series, there will be a background color block when selecting an option. IE7-IE10 all have this bug.
Under Opera, the background image of the div is not displayed, that is, the drop-down arrow of the select is not displayed. I don't know the reason for this.

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

The above is the detailed content of css adds style to select (no script) implementation. For more information, please follow other related articles on the PHP Chinese website!