css自定义 range radio select的样式滑轮，按钮，选择框

写在前面：

以前踩坑css的时候，遇到滑轮，按钮，选择框这类型的东西，为了页面效果，老是须要自定义他们的样式，而不使用他们的默认样式。当时写的时候，我也是蛮头疼的，弄了个demo，连接在下面。对此作个总结。本文是面向前端小白的，大手子能够跳过，写的很差之处多多见谅。

额，今天就先大概的将代码贴上来，考虑到篇幅的问题，就先写一下三个的实现方式，通常也都看得懂，代码注释的很是详细。由于细分下来内容也不少，准备以后再将如何实现的方式，属性，优化以及如何兼容各个浏览器的方式一步步的写出来。

最终效果：

如何使用这些属性？

用法很简单，以下所示：

<input type="range">//滑动条
<input type="radio">//按钮
<select>//选择框
复制代码

input type="range"样式修改：

html content

<div>
 <input type="range" class="slider-block" id="slider" max="18" min="6" step="1" value="6">
    <!--主要是一个type="range"属性,其余的会在细分的文章里面讲出来-->
</div>
复制代码

csscontent

.slider-block{
            outline: none; /*去掉点击时出现的外边框*/
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none; /*这三个是去掉那条线原有的默认样式，划重点！！*/
            width: 30%;
            height: 0.3rem;
            background: orange; /*这三个是设置滑块下面那条线的样式*/
        }
        input[type="range"]::-webkit-slider-thumb {
            /*::-webkit-slider-thumb是表明给滑块的样式进行变动*/
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none; /*//这三个是去掉滑块原有的默认样式，划重点！！*/
            -webkit-box-shadow:0 0 2px ;/*设置滑块的阴影*/
            width: 2.6rem;
            height:1.6rem;
            background: url("images/js2-d_03.png");
            background-size: cover; /*//这几个是设置滑块的样式*/
        }
        //文章下面有demo连接
复制代码

文章下面有demo连接

代码里面注释关键点都写了，还不能理解的，能够看下demo。

---

input type="radio"修改默认样式

html content

<form class="task10-main-box-shape" method="post" action="#">
    <!--//表单元素基本上都要加form，传送的参数的方式，传递的位置，这是一个好习惯-->

<div>
    <input id="shape1" name="box-shape" type="radio"  checked="checked" value="shape1" />
    <!--checked属性是当页面载入的时候选择这个按钮，value是传送的值-->
    <label for="shape1">对口箱</label><!--/加label标签点击这个字的时候，能够选中按钮-->
</div>
</form>
复制代码

css样式这里相对难点，但我注释的已经不少了。

.task10-main-box-shape input[type="radio"]{
            display: none;
            /*隐藏默认按钮的样式,这跟其余隐藏默认按钮的样式的方法不同，注意一下*/
        }
复制代码

.task10-main-box-shape label{  /*这里是设置文字的样式*/
            display: inline-block;
            cursor: pointer;
            position: relative;
            padding-left: 3rem;
            margin-right: 6rem;
            font-size: 1.8rem;
            color: rgb(102,102,102);
           
        }
        .task10-main-box-shape label:before { /*这里是没被选中时候按钮的样式*/
            content: "";
            /*将要自定义的东西设置为空的字符串，就能够往里面随意加定义的样式了*/
            display: inline-block;
            background-color: #FFFFFF; /*设置背景*/
            padding:0.45em; /*撑开背景，就是中间那块白色的*/
            border: 1px solid gray;
            margin-right: 10px;
            position: absolute;
            left: 0;
            bottom: 3px;
            border-radius: 50%; /*设置圆角*/

        }

        input[type=radio]:checked + label:before {/*按钮被选中以后的样式，多了一个checked*/
            font-size: 1px;
            color: #FFFFFF;
            border:0.7rem solid rgb(29,122,217);
            /*设置按钮样式*/
        }
复制代码

---

select修改默认样式

### html cantent

<div>
    <select class="task10-main-box-row2-select">
        <option>查看详情</option>
        <option>我也不知道</option>
        <option>详情是什么</option>
    </select>
</div>
复制代码

css cantent

.task10-main-box-row2-select{
            font-size: 1.6rem;
            color: rgb(153,153,153);
            padding: 0.3% 2% 0.3% 1%;
            margin: 0; /*这里是选择框里面的样式*/
            background: url("images/task10-d_03.png") no-repeat 97%;
            /*97%是设置图片，也就是三角形的位置*/
            background-size:20%; /*背景图片的尺寸*/
            appearance:none;
            -moz-appearance:none;
            -webkit-appearance:none; /*这三个是隐藏默认样式*/
        }
复制代码

ps:css样式写的有点乱，各位看官，将就着看看，下面有demo连接。

---

总结

总的来讲这类型的首先须要将样式隐藏掉，而后再自行添加须要的类型，可是有些隐藏样式的方式也不一样，有些是这种，appearance:none; -moz-appearance:none; -webkit-appearance:none;像radio按钮的，反而是display:none;这种类型的。还有的样式能够写的很好看，好比滑块怎么移动的时候，填充条跟着移动。会的你们都会，要琢磨的精，会别人不会的，才是你身价所在。

---

后话：

连续一个多星期不睡午觉，终于熬不住了。感受身体被掏空，之后就改成下午的时候更文。由于一些事情耽搁了，直到晚上才弄好。下面几天会逐渐把这几个如何实现的方式，属性，优化以及如何兼容各个浏览器的方式一步步的写出来，连接会放在文末的。

伪装这里有三个连接。 range滑块自定义样式，步骤详解以及实际应用

最后：但愿看完的朋友点个喜欢，也能够关注一下我，如今这阶段基本上每月都不会少于十五篇文章（看到干货我也会进行分享）。码字不易，感谢支持，感激涕零！

掘金我的主页

demo连接：https://obkoro1.github.io/article-demo/diy-style/diyStyle.html

以上，2017.4.16.