css下拉框样式-选择下拉框样式

虽然原生的select下拉框很方便，直接将选项写入option中就可以得到平滑的下拉框，但是原生的样式也很烦人。

首先，各大浏览器中渲染的样式结果也是多样化的，IE下的样式更加有特色css下拉框样式，并且会根据选项的位置进行滑动。

从左到右：Firefox、ie、Edge、chrome、Safari

一般来说，遇到这些情况css下拉框样式，我们会选择重置样式。 然后你会发现，如果你选择了自己那么喜欢的一款，有些款式是你根本无法改变的。 示例（运行环境为chrome）：

        
        
            chrome
            safari
            Edge
            firefox
            ie8
        
            /*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;
            }

出现的样式如下

镀铬渲染

经过多次测试，发现该样式有几个部分难以覆盖。

如果需求变化不大的话，可以直接使用原生select，但是我做的页面色调比较丰富，原生select的风格显然不能满足我。 网上有一些说法，选择透明度为0，或者外观为none，但这都不是我想要的。 最后决定以列表的形式自己写一个下拉框。

    
        
        
        
            /*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);
            }
        
    
    
        
        

            

                

                    
                    ▼
                
                

                    
chrome
                    
safari
                    
Edge
                    
firefox
                    
ie8
                
                
            
        
        
            //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);
        
    

贴出所有代码后，显示的样式如下

手写风格