Pure CSS to add style to select (no script) implementation

Change the default style of select, usually through ul,li to simulate to achieve.
There are many Jquery plug-ins that change the default select style 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, and the result was the same: the data could not be obtained.

Later, I read a blog written by a foreigner. He used 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 style of the default arrow of the select by setting the background attribute of the div.
This method is a good method. It does not require writing scripts, but only uses pure CSS to implement it.

However, this method also has flaws. In the IE series, there will be a background color block when a certain option is selected. IE7-IE10 all have this bug.
In 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 what the reason is.
The following code

Copy code

The code is as follows:

<div class="select_style">
<select name="select">
<option>AAAAAAAAAAA</option>
<option>BBBBBBBBBBB</option>
<option selected>CCCCCCCCCCC</option>
<option>DDDDDDDDDD</option>
</select>
</div>

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

<<: Detailed process of installing and deploying onlyoffice in docker

>>: MySQL restores data through binlog

How to disable foreign key constraint checking in MySQL child tables

Pure CSS to add style to select (no script) implementation

How to disable foreign key constraint checking in MySQL child tables

MySQL turns off password strength verification

How to check if data exists before inserting in mysql

MySQL database index order by sorting detailed explanation

Website construction experience summary

Let's learn about MySQL database

Gogs+Jenkins+Docker automated deployment of .NetCore steps

Analysis of the process of configuring a simple network environment based on Tcl language

XHTML: Frame structure tag

Solution to interface deformation when setting frameset height

Recommend

CentOS 6.5 installation mysql5.7 tutorial

Docker file storage path, modify port mapping operation mode

Things to note when writing self-closing XHTML tags

MySQL Database Basics SQL Window Function Example Analysis Tutorial

Record the whole process of MySQL master-slave configuration based on Linux

Solution to Linux server graphics card crash

Implementation of CSS scroll bar style settings

Detailed steps for quick installation of openshift

MySQL5.7.21 decompressed version installation detailed tutorial diagram

ffmpeg Chinese parameter description and usage examples

A brief discussion on the invalidation or implicit conversion of MySQL integer and string indexes

A brief understanding of several scheduling algorithms for Nginx seven-layer load balancing

Introduction to the use of em in elastic layout in CSS3: How many pixels is 1em?

How to implement Docker container self-start

Solution to the problem that directly setting the width and height of a hyperlink does not work