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

Tutorial on installing Ubuntu 20.04 and NVIDIA drivers

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

Tutorial on installing Ubuntu 20.04 and NVIDIA drivers

Summary of common commands for building ZooKeeper3.4 middleware under centos7

CentOS 6.4 MySQL 5.7.18 installation and configuration method graphic tutorial

jQuery achieves the effect of advertisement scrolling up and down

Example analysis of the search function of MySQL regular expressions (regexp and rlike)

VUE implements timeline playback component

Detailed explanation of the organizational structure diagram case of Vue's vue-tree-color component

Discuss the value of Web standards from four aspects with a mind map

How to use display:olck/none to create a menu bar

How to use the VS2022 remote debugging tool

Recommend

The solution of html2canvas that pictures cannot be captured normally

Vue implements horizontal scrolling of marquee style text

Difference between querySelector and getElementById methods in JS

Summary of MySQL InnoDB architecture

Instructions for deploying projects to remote machines using the Publish Over SSH plugin in Jenkins

Summary of Vue first screen performance optimization component knowledge points

Vue3 slot usage summary

Detailed explanation of FTP server configuration and 425 error and TLS warning solutions for FileZilla Server

Docker uses root to enter the container

A brief discussion on the synchronization solution between MySQL and redis cache

Vue implements drag and drop or click to upload pictures

MySQL startup error 1067 and invalid recovery after changing character set and restarting

MySQL5.7 master-slave configuration example analysis

Detailed explanation of how to deploy and install the Chinese version of Redash in Docker

Win2008 Server Security Check Steps Guide (Daily Maintenance Instructions)