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

Analysis of several reasons why Iframe should be used less

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

Analysis of several reasons why Iframe should be used less

Mac installation mysqlclient process analysis

Write a dynamic clock on a web page in HTML

Native js implements a minesweeper game with custom difficulty

This article takes you into the world of js data types and data structures

Pure CSS3 to achieve beautiful input input box animation style library (Text input love)

Complete steps to install FFmpeg in CentOS server

Detailed description of mysql replace into usage

VMware15 installation of CentOS7 detailed process and common problems (picture and text)

Implementation of Redis master-slave cluster based on Docker

Recommend

Solution ideas and implementation steps for the problem of css and js becoming invalid after struts2 jump

Detailed explanation of scroll bar scrolling control of DOM elements in HTML

Summary of practical skills commonly used in Vue projects

Pure HTML and CSS to achieve JD carousel effect

Linux nohup to run programs in the background and view them (nohup and &)

Master the commonly used HTML tags for quoting content in web pages

Building an image server with FastDFS under Linux

Vue+Openlayer uses modify to modify the complete code of the element

A brief discussion on MySQL index optimization analysis

Centos8 (minimum installation) tutorial on how to install Python3.8+pip

MySQL query duplicate data (delete duplicate data and keep the one with the smallest id as the only data)

Introduction to Nginx regular expression related parameters and rules

Analysis of Sysbench's benchmarking process for MySQL

Details about the like operator in MySQL

Analysis of the use and principle of Docker Swarm cluster management