Shulou(Shulou.com)06/03 Report--

This article mainly introduces "how to implement CSS custom select drop-down selection box without other tag simulation and is compatible with most browsers". In daily operation, it is believed that many people have doubts about how to implement CSS custom select drop-down selection box without other tag simulation and compatible with most browsers. The editor consulted all kinds of materials and sorted out simple and useful operation methods. I hope it will be helpful to answer the question of "how to implement CSS custom select drop-down selection box without other tag simulation and compatible with most browsers"! Next, please follow the editor to study!

Today, someone in the group asked how to customize the style of the select drop-down selection box, so there was a heated discussion in the group. At the beginning, they always considered how to use the pure CSS implementation to overwrite the default style of the browser, but in the end, they all failed because of poor handling of compatibility problems. The final solution is to use other elements (such as ul,li) to simulate the drop-down menu, or to use some ready-made plug-ins on the Internet.

In fact, select this thing only rely on pure CSS can not solve this custom style problem, but since you have been messing around for so long, let's talk about the idea of CSS implementation.

First, for the default style:

At first, I thought of using the background, but the experiment did not work on setting the background for select, so then I thought of overwriting, covering the downward arrow with other elements, and then setting the background for this element. I wrote a demo and found it feasible, so I had the following.

First wrap the select with an a tag:

The code is as follows:

Option one

Option two

Option three

Option four

Option five

Let select "hide" in css, but cannot display:none;, or the select element does not exist. Here we can change the transparency of select to 0, so that we can not see it, but it does not affect the drop-down box. Click on the drop-down box and it will appear again. This seems to be feasible, but we will find that after each selection, the option is not displayed. This is why select is hidden, even the text is hidden, so we need an extra tag to store the option for each selection. Here is the complete HTML code:

The code is as follows:

Please select

Option one

Option two

Option three

Option four

Option five

CSS Code:

The code is as follows:

* {

Margin: 0

Padding: 0

}

Body {

Padding: 50px 50px

}

. btn-select {

Position: relative

Display: inline-block

Width: 150px

Height: 25px

Background-color: # f80

Font: 14px/20px "Microsoft YaHei"

Color: # fff

}

. btn-select. Cur-select {

Position: absolute

Display: block

Width: 150px

Height: 25px

Line-height: 25px

Background: # F80 url (ico-arrow.png) no-repeat 125px center

Text-indent: 10px

}

. btn-select:hover. Cur-select {

Background-color: # f90

}

. btn-select select {

Position: absolute

Top: 0

Left: 0

Width: 150px

Height: 25px

Opacity: 0

Filter: alpha (opacity: 0;)

Font: 14px/20px "Microsoft YaHei"

Color: # f80

}

. btn-select select option {

Text-indent: 10px

}

. btn-select select option:hover {

Background-color: # f80

Color: # fff

}

The final effect is as follows (screenshot on Chrome):

However, this does not completely override the default style of the browser, such as the border of the drop-down box in the figure, and it is even worse on ie, so if you use it in a real project, use plug-ins or other elements instead.

At this point, this article is not finished. We need to use a section of js. You need to display the selected content in the span tag. Here is the js code:

The code is as follows:

Var $$= function (id) {

Return document.getElementById (id)

}

_ window.onload = function () {

Var btnSelect = $$("btn_select")

Var curSelect = btnSelect.getElementsByTagName ("span") [0]

Var oSelect = btnSelect.getElementsByTagName ("select") [0]

Var aOption = btnSelect.getElementsByTagName ("option")

OSelect.onchange = function () {

Var text= oSelect.options[oSelect.selectedIndex] .text

CurSelect [XSS _ clean] = text

}

}

At this point, the study on "how to implement the CSS custom select drop-down selection box without other tag simulation and compatible with most browsers" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.