如何用css样式改变下拉菜单的样式？

  敲下如下代码：

  <select>
      <option>option1</option>
      <option>option2</option>
      <option>option3</option>
   </select>

  你将会看到如下图的默认下拉选择框样式，

  虽然也无伤大雅，但如果你想让它更个性点呢，像这样？

  

  只需要改变下select的css样式就可以做到了~

  原理：将浏览器默认的下拉框样式清除，然后应用上自己的，再附一张向右对齐小箭头的图片即可。

 select {

    /*复写下边框，将边框颜色改为跟所在div的background一样的颜色，就看不到边框啦*/
    border:1px solid  #f5f5f5;

    /*很关键：将默认的select选择框样式清除*/
    appearance:none;
    -moz-appearance:none;
    -webkit-appearance:none;

    /*在选择框的下方中间显示小箭头图片*/
    background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll center bottom transparent;

    /*为下拉小箭头留出一点位置，避免被文字覆盖*/
    padding-bottom: 10px;
}

个性化下拉选择框完成！