select统一浏览器样式css和前缀

<div id="parent">
  <select>
      <option>what</option>
      <option>the</option>
      <option>hell</option>
  </select>
</div>

#parent{
    background: url('http://ourjs.github.io/static/2015/arrow.png') right center no-repeat; 
   /* the width and the height of your image */
    width: 100px;
    height: 30px;
    overflow: hidden;
    border: solid 1px #ccc;
}

#parent select{
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    background:transparent;
    border:none;
    padding-left:10px;
    width: 100px;
    height:100%;    
}

四大浏览器内核:

1.Trident  => IE内核

2.Gecko  => FireFox内核

3.Webkit  => Chrome内核,Safari内核

4.Presto  =>Opera内核

私有前缀:

-ms- 代表IE浏览器私有属性

-moz- 代表FireFox浏览器私有前缀

-webkit- 代表Chrome,Safari浏览器私有属性

-o- 代表Opera浏览器私有属性

现在很多浏览器已经都支持css3的属性, 在写源代码的时候可以不必前缀, 但是为了兼容老浏览器,依然要注意前缀时, 可以使用PostCSS的Autoprefixer插件解决