Change the default select style, which is simulated by ul and li in general cases. The Jquery plug-in is also like this. Next we will introduce a method that does not write scripts and is implemented with only pure css. In the IE series, when selecting a certain option will have a background color block, IE7-IE10 has this bug, interested friends can refer to Ah change select default style, generally, ul and li are used for simulation.
Many Jquery plug-ins use this method to change the default select style.
According to my brother, this method cannot obtain data after form is submitted. After experiment, different JS/Jquery plug-ins are used, and the same result is returned: data cannot be obtained.
Next, let's look at a blog written by a foreigner. We use the css style to add a p to the select field and set the select width to be less than the width of the parent p, then, you can change the default select arrow style by setting the background attribute of p.
This method is a good method. without writing a script, you only need to implement it with simple css.
But this method is also flawed, is in the IE series, when selecting an option will have a background color block, IE7-IE10 has this bug.
In Opera, the background image set to p is not displayed, that is, the select drop-down arrow is not displayed. I don't know why.
The following code
The Code is as follows:
AAAAAAAAAAA Bbbbbbbbbbbbb CCCCCCCCCCC DDDDDDDDDDD
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 */
}
