css modify the default style drop-down list select the

html code:

<div>

     <select name= "" >

 

         <option value= "芝士" >芝士</option>

         <option value= "奶油" >奶油</option>

     </select>

</div>

Adding to select the parent element div purpose of, covered with select styles div style

select{ //清除select的边框样式             border: none; //清除select聚焦时候的边框颜色             outline: none; //将select的宽高等于div的宽高             width: 100%;             height: 40px;             line-height: 40px; //隐藏select的下拉图标             appearance: none;             -webkit-appearance: none;             -moz-appearance: none; //通过padding-left的值让文字居中             padding-left: 60px;  }

// use pseudo-classes to select Add icon they want to use

div:after{

　　content: "";

　　width: 14px;

　　height: 8px;

　　background: url(img/xiala.png) no-repeat center;

　　 // By positioning the icon in the right place

　　position: absolute;

　　right: 20px;

　　top: 45%;

　　 // custom icons to click down function to achieve

　　pointer-events: none;

}