CSS custom select drop-down box (do not use other label simulation)

Today, some people in the group asked how to customize the style of the select drop-down box, so there was a heated discussion in the Group. At the beginning, I was always thinking about how to implement it with pure CSS, overwrite the default style of the browser, but it all fails because of poor compatibility. The final solution is to use other elements (such as ul and li) to simulate the drop-down menu, or use some existing plug-ins on the Internet.

In fact, the select option cannot solve the problem of the custom style only by pure CSS, but since it has been so long, let's talk about the idea of CSS implementation.

First, for the default style:

I first thought of using the background, but it was not effective to set the background for the select statement. So I thought of overwriting and covered the down arrow with other elements, then set the background for this element and write a demo to find it feasible, so we have the following.

First, use a tag a to enclose select:

123456789

<a class="btn-select" id="btn_select">    <select>        <option> Option 1 </option>        <option> Option 2 </option>        <option> Option 3 </option>        <option> Option 4 </option>        <option> Option 5 </option>    </select></a>

In css, let select "hide", but do not display: none; otherwise, the select element does not exist. Here we can change the transparency of select to 0, so that we cannot see it, but it does not affect the drop-down box. When you click it, the drop-down box will still appear. This seems to be feasible, but it will find that the options are not displayed after each selection. This is why select is hidden, text is hidden, so we need an additional tag to store the options selected each time. The following is the complete HTML code:

123456789101112

<form><a class="btn-select" id="btn_select">    <span class="cur-select"> Select </span>    <select>        <option> Option 1 </option>        <option> Option 2 </option>        <option> Option 3 </option>        <option> Option 4 </option>        <option> Option 5 </option>    </select></a></form>

CSS code:

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253

* {    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 result is as follows (on Chrome ):

However, this does not completely cover the default style of the browser, and the frame in the drop-down box cannot be processed. In addition, it is more difficult to read on ie, so it is used in real projects, use plug-ins, or use other elements.

At this point, this article is not complete, and we need to use a piece of js. We need to put the selected content in the span label and display it. below is the js Code:

12345678910111213

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.innerHTML = text;    }}

OK.