css技巧，如何设置select、radio 、 checkbox 、file这些不可直接设置的样式 。

前言：

　　都说程序员有三宝：人傻，钱多，死得早。博主身边的程序“猿”一大半应了这三宝，这从侧面说明了一个问题，只有理性是过不好日子的。朋友们应该把工作与生活分开，让生活变得感性，让工作变得理性，两者相提并行，岂不快哉。咳，话题扯得有点远，今天博主给大家写一篇关于css如何设置select、radio 、 checkbox 、file样式的问题，这里不涉及模拟框，仅介绍原生情况下如何做到自定义样式，废话不多说，赖次够！

1.select与input file：

　　相信大家都遇到过这样的问题，大多数浏览器select选择框不能被直接修改样式，实在是不够美观，先看一下代码：

　　　　<style type="text/css">
            #box{
    width: 500px; margin: 50px auto;}
            #box select{
    width: 200px; height: 30px; border: 1px solid red;background: green;color: #ffffff;}
        </style>
        <div id="box">
            <select name="xuanxiang">
                <option value="">选项一</option>
                <option value="">选项二</option>
                <option value="">选项三</option>
            </select>
        </div>

这里把select设置成宽度200px，高度30px，边框红色，背景绿色，文字白色；

咱们来看看各大浏览器的显示效果；

 

博主的win10系统闹小情绪了，ie打不开 将就一下，总之我们可以看到，它最大的问题是右边的箭头，各有特色，另外弹出的框样式也各不相同。

怎么样屏蔽浏览器自带的效果呢，楼主有一个小技巧教给大家，支持ie8及以上的浏览器。（e6是什么？可以吃吗？）。

利用css中的“七层重叠法”，即网页内容先后顺序分别为：背景边框 ， 负值z-index ， display:block , 浮动 , display:inline-block , z-index:auto , 正值z-index，

越往后在网页中的层级越靠前，也就是说如果一个z-index值为1或者更高的话 它会遮挡掉他之前的所有元素。

利用这个法则以及opacity设置透明度，可以模拟一个样式，这个样式是自定义的。看下面的代码

　　　　<style type="text/css">
            #box{
    width: 500px; margin: 50px auto; position: relative; }
            #box select{
    width: 200px; height: 30px; position: relative; z-index: 1;  opacity: 0; } 
            .selectbg{
   position: absolute; left: 0;top: 0; width: 200px; height: 30px;