select 下拉框样式

2017-05-26 本文已影响0人詹小云

原生的select下拉框其实挺方便的，直接把选项写入option就能得到一个流畅的下拉框，但是原生的样式也是让人忧愁。
首先，在各大浏览器中渲染出来的样式结果也是多样化，ie下的样式更是与众不同，会根据选项位置进行滑动。

从左往右依次为：Firefox、ie、Edge、chrome、Safari

一般这种情况下，我们会选择重置样式。然后你会发现，select超爱自己的，有些样式你根本无法变动。举例子（运行环境为chrome）：

        <!--html-->
        <select >
            <option value="chrome">chrome</option>
            <option value="safari">safari</option>
            <option value="Edge">Edge</option>
            <option value="firefox">firefox</option>
            <option value="ie8">ie8</option>
        </select>

            /*css*/
            body{
                background: #FFBD1E;
            }
            select{
                font-family: "微软雅黑";
                margin:100px;
                background: rgba(0,0,0,0);
                width: 249px;
                height: 40px;
                font-size: 18px;
                color: white;
                text-align: center;
                border: 1px #1a1a1a solid;
                border-radius: 5px;
            }
            option{
                color: black;
                background: #A6E1EC;
                line-height: 20px;
            }
            select:focus{
                border: 2px #ddd solid;
                box-shadow: 0 0 15px 1px #DDDDDD;
            }
            option:hover{
                background: #EBCCD1;
            }

出现的样式如下

chrome渲染

经过多次测试，发现有几部分的样式是无法覆盖的。

select的focus状态：虽然有呈现出来，但是明显被原生样式压在下面了
option的hover状态：同上
option的背景颜色：无法实行透明度，一旦透明度变为0，会自动转换成白色。
字体位置：text-align：center无法实现

如果需求变化不大，倒是可以直接采用原生的select，但是我所做的页面色彩比较丰富，select原生样式很明显无法满足我。网上有一些说法是将select透明度为0，或是appearance为none，但是都不是我要的，最终决定用列表的方法，自己写一个下拉框。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            /*css*/
            /*通用样式*/
            body{
                background: #FFBD1E;
            }
            ul,li{
                list-style: none;
                padding: 0;
                margin: 0;
            }
            /*下拉框样式*/
            #select{
                margin:100px;
                background: rgba(0,0,0,0);
                width: 249px;
                height: 40px;
                font-family: "微软雅黑";
                font-size: 18px;
                color: white;
                border: 1px #1a1a1a solid;
                border-radius: 5px;
            }
            .select-head{
                overflow: hidden;
                width: 249px;
                height: 40px;
                box-sizing: border-box;
                padding: 0 10px;
                line-height: 40px;
            }
            .select-head .select-head-cont{
                float: left;
            }
            .select-head .select-icon{
                float: right;
            }
            .option{
                text-indent: 10px;
                margin-top: 1px;
                width: 249px;
                color: black;
                background: rgba(236,111,111,0.1);
                line-height: 25px;
                border: 1px #cfcfcf solid;
                display: none;
            }
            .option-item:hover{
                background: rgba(204,106,67,0.3);
            }
        </style>
    </head>
    <body>
        <!--html-->
        <ul id="select">
            <li>
                <div class="select-head">
                    <span class="select-head-cont"></span>
                    <span class="select-icon">▼</span>
                </div>
                <ul class="option">
                    <li class="option-item">chrome</li>
                    <li class="option-item">safari</li>
                    <li class="option-item">Edge</li>
                    <li class="option-item">firefox</li>
                    <li class="option-item">ie8</li>
                </ul>
                
            </li>
        </ul>
        <script type="text/javascript">
            //int
            var selectHead = document.getElementsByClassName('select-head')[0];
            var selectHeadCont = document.getElementsByClassName('select-head-cont');
            var Option = document.getElementsByClassName('option')[0];
            var optionItem = document.getElementsByClassName('option-item');
            
            /*默认是第一个选项*/
            selectHeadCont[0].innerHTML = optionItem[0].innerHTML;
            
            /*点击后出现下拉框*/
            selectHead.addEventListener('click',function(){
                Option.style.display = 'block';
            },false);
            /*点击选项后出现在下拉框*/
            var len = optionItem.length;
            for(var i=0;i<len;i++){
                optionItem[i].index = i;
                optionItem[i].addEventListener('click',function(){
                    selectHeadCont[0].innerHTML = optionItem[this.index].innerHTML;
                    Option.style.display = 'none';
                },false);
            }
            /*点击其他地方时，select会收起来*/
            document.body.addEventListener('click',function(){
                Option.style.display = 'none';
            }.false);
        </script>
    </body>
</html>

贴出全部代码后，展示的样式如下

手写样式

select 下拉框样式

猜你喜欢

热点阅读