改变select样式

 css

 

.select {

        border: 1px solid #bdb2b2;

        border-radius: 10px;

        /*清除select聚焦时候的边框颜色*/

        outline: none;

        /*设置select的宽高*/

        width: 200px;

        height: 40px;

        line-height: 40px;

        /*隐藏select的下拉图标*/

        appearance: none;

        -webkit-appearance: none;

        -moz-appearance: none;

        /*通过padding-left的值让文字处于合适位置*/

        padding-left: 20px;

        /* 设置下拉图标 */

        background: url("1.jpg") no-repeat right center transparent;

    }

 html

       

Volvo

       

Saab

       

Opel

       

Audi

   

option是html固有元素；无论怎么修改都是不起作用的。

想修改option样式，只能通过divulli重写下拉框效果 如下图  具体需求可以自己再次进行更改

   

   

   

   

       

           

• 11

           

• 22

           

• 33

       

 

 效果如图