select 下拉框样式

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

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

一般这种情况下，我们会选择重置样式。然后你会发现，select超爱自己的，有些样式你根本无法变动。举例子（运行环境为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;
            }

出现的样式如下

chrome渲染

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

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

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

    
        
        
        
    
    
        
        

            

                

                    
                    ▼
                
                

                    
chrome
                    
safari
                    
Edge
                    
firefox
                    
ie8
                
                
            
        
        
    

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

手写样式