CSS美化select下拉框

上次我写过一个文章《select美化方案，select美化JQ代码，让select在各个浏览器上看起来一样》，这个是使用JQ来写的，这次就来个CSS的。

select在PC端上的显示是一个特别蛋疼的事情，咱们先看一下代码以及截图，咱们可以看到得到，每个浏览器之间的差别。

还有当select不加border和加border时候的不一样的显示方式。

对，这些浏览器就是这么牛逼，牛逼到让人猝不及防。我都没敢把IE7的截图放出来。

<select>
    <option>CGL青格勒</option>
    <option>CGL青格勒1</option>
    <option>CGL青格勒2</option>
    <option>CGL青格勒3</option>
</select>
<style>
    *{ margin:0; padding:0;}
    select{ display:block; 
        height:32px; 
        line-height:32px; 
        font-size:14px; 
        width:240px; 
        margin:20px auto;}
</style>

后来得知select的样式是可以清除的，代码如下：

<select class="select">
    <option>CGL青格勒</option>
    <option>CGL青格勒1</option>
    <option>CGL青格勒2</option>
    <option>CGL青格勒3</option>
</select>
<style>
    *{ margin:0; padding:0;}
    select{ display:block;
        height:32px;
        line-height:32px;
        font-size:14px;
        width:240px;
        margin:20px auto;}
    .select{appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    -ms-appearance:none;
    -o-appearance:none;
    -khtml-appearance:none;}
    .select::-ms-expand { display: none;}
</style>

截图如下：

这里除了火狐、IE89之外其他的浏览器都一样了。

火狐的显示只有稍微的不一样，文字和边框的距离比谷歌的要大，但是还是在可以接受的范围之内，经过一段考虑之后，直接放弃IE89，因为IE89没有找到方法。

那么接下来就比较好弄了，除了IE89咱们可以做成一样的，因为其他浏览器咱们取消了箭头，所以咱们还得模拟一个出来。

模拟之前咱们还得考虑低版本的IE浏览器，先来个截图

这里看看低版本IE里面按钮的宽度是多少，17px的宽度，那么咱们模拟出来的按钮的宽度不能大于17px：

咱们再次贴代码：

<select class="select">
    <option>CGL青格勒</option>
    <option>CGL青格勒1</option>
    <option>CGL青格勒2</option>
    <option>CGL青格勒3</option>
</select>
<style>
    *{ margin:0; padding:0;}
    select{
        display:block;
        height:32px;
        line-height:20px;
        font-size:14px;
        width:240px;
        margin:20px auto;
        background: url("jiantou.png") no-repeat right center;}
    .select{appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    -ms-appearance:none;
    -o-appearance:none;
    -khtml-appearance:none;}
    .select::-ms-expand { display: none;}
</style>

然后截图一下：

ok，一个小小的下拉按钮出来了，当用户使用低版本的浏览器的时候，这个按钮隐藏在默认的按钮下面，当我们的清除样式奏效的时候就会出来。