Pure css to add styles to select (no script) implementation_HTML/Xhtml_web page production

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

Later I read a blog written by a foreigner. I used CSS styles to add a div outside the select. I set the width of the select to be smaller than the width of the parent div, and then changed the select by setting the background attribute of the div. The default arrow style.
This method is a good method. It does not require writing scripts, but only uses 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 set not to be displayed, that is, the drop-down arrow of the select is not displayed. I don’t know the reason for this.
The following code

Copy the code

The code is as follows:

AAAAAAAAAAAA
BBBBBBBBBB ;CCCCCCCCCCCC
DDDDDDDDDD

🎜>

Copy code

The code is as follows:

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