写在前面:
之前踩坑css的时候,遇到滑轮,按钮,选择框这类型的东西,为了页面效果,总是需要自定义他们的样式,而不使用他们的默认样式。当时写的时候,我也是蛮头疼的,弄了个demo,链接在下面。对此做个总结。本文是面向前端小白的,大手子可以跳过,写的不好之处多多见谅。
额,今天就先大概的将代码贴上来,考虑到篇幅的问题,就先写一下三个的实现方式,一般也都看得懂,代码注释的非常详细。因为细分下来内容也很多,准备之后再将如何实现的方式,属性,优化以及如何兼容各个浏览器的方式一步步的写出来。
最终效果:
如何使用这些属性?
用法很简单,如下所示:
//滑动条
//按钮
//选择框
input type="range"样式修改:
html content
csscontent
.slider-block{
outline: none; /*去掉点击时出现的外边框*/
-webkit-appearance: none;
-moz-appearance: none;
appearance: none; /*这三个是去掉那条线原有的默认样式,划重点!!*/
width: 30%;
height: 0.3rem;
background: orange; /*这三个是设置滑块下面那条线的样式*/
}
input[type&#