纯CSS方法：给input range整容

马黑黑 发表于 2022-11-26 10:42

本帖最后由马黑黑于 2022-11-26 13:34 编辑 <style>

.range { -webkit-appearance: none; position: relative; outline: none; }

.chrome_track::-webkit-slider-runnable-track {
height: 2px;
background: olive;
}

.firefox_track::-moz-range-track {
height: 2px;
background: olive;
}

.chrome_ball::-webkit-slider-thumb {
-webkit-appearance: none;
-moz--appearance: none;
position: relative;
width: 20px;
height: 20px;
border: 4px solid hsla(100,10%,80%,.95);
border-radius: 50%;
background: olive;
top: calc(50% - 10px);
cursor: pointer;
}

.firefox_ball::-moz-range-thumb {
-moz-appearance: none;
width: 12px;
height: 12px;
border: 4px solid hsla(100,10%,80%,.75);
border-radius: 50%;
background: olive;
cursor: pointer;
z-index: 888;
}

.firefox_prog::-moz-range-progress {
background: red;
}

</style>

input是一个集成式标签，当type="rnage"时，它是一个滑动条，属HTML5的一个新对象。试看： 

<input type="range" value="30">

 上面效果的代码： <input type="range" value="30" /> 不同浏览器（包括内核和版本）下，range的默认样式会不一样，在IE下是最难看（IE9 以上才支持range），其他非IE的浏览器下会好看一些，但也好不了多少。所以，input是要整容的，请把它送去韩国——哎呀，兜里钢镚好像没多少个呢，算了，自己动CSS杀猪刀吧{:5_145:}。 第一步：扒皮。就是，把range的皮剥掉。根据浏览器文档，Firefox和chromium都提供一个实验性属性，appearance，外观，通过对它的设置，可以给range蜕皮。因为是实验性质的，需要前缀，Firefox用 -moz-，chromium用-webkit-，现在Firefox支持部分-webkit- 前缀，包括这个 -webkit-appearance，所以，我们给这个range滑动条剥皮的方法是： -webkit-appearance: none; 看看有木有效果： 

<input type="range" value="30" style="-webkit-appearance: none;">

 嗯，轨迹不见了，只剩下一个滑块（这个滑块不同浏览器下是不一样的）。我们是用range来做进度条的，得有。整容嘛，就是把不好看的切掉，然后装上新的。chromium提供一个轨道设置方法，slider-runnable-track，同样是实验性的东东： input::-webkit-slider-runnable-track { height: 2px; background: olive;} 这个，其实是利用了浏览器内置的一个伪元素的方法来对滑道进行修饰，它还是遵循CSS的相关规范的。不过，这个 slider-runnable-track 在Firefox那里内置的名称不一样，它是 range-track，为了兼容可爱的火狐狸，我们得加一组CSS代码： input::-moz-range-track { height: 2px; background: olive;} OK，看看效果： 

<input type="range" class="range firefox_track chrome_track" value="30">

 咦，滑块怎么跑到底部了？没关系，我们的杀猪刀很利，对这个小滑块同样可以整容。chromium提供一个slider-thumb，说的就是滑块，我们对它这么干： input::-webkit-slider-thumb { -webkit-appearance: none; position: relative; width: 20px; height: 20px; border: 4px solid hsla(100,10%,80%,.95); border-radius: 50%; background: olive; top: calc(50% - 10px); cursor: pointer;} 上面代码，先割掉range原装滑块，然后给它定义宽高尺寸、形状、边框、背景颜色、鼠标指针等，最重要的是红色部分的代码，chromium需要设置position为relative，否则下面的top值将不能生效，就无法将滑块上移。Firefox新版则可以不需要定义滑块的position属性、也不需要设置top值，就是说滑块在Firefox中是垂直居中的。但它的滑块名称不同，它提供的是range-thumb，所以加一组代码以适配Firefox： input::-moz-range-thumb { -webkit-appearance: none; width: 12px; height: 12px; border: 4px solid hsla(100,10%,80%,.75); border-radius: 50%; background: olive; cursor: pointer;} 

<input type="range" class="range firefox_track chrome_track chrome_ball firefox_ball firefox_prog" value="30">

 Firefox还支持定义进度条已加载部分的颜色，名称为range-progress，代码如下： input::-moz-range-progress { background: red;} 使用火狐浏览器浏览本帖，最后一个滑动条，滑块左边的轨迹是红色的。 遗憾的是，-webkit- 未提供进度条已加载部分的颜色设置，CSS杀猪刀对之无能为力，我们需要祭出JS杀牛刀才行（效果请查看示范帖子 <a href="https://www.huachaowang.com/forum.php?mod=viewthread&tid=64897&extra=page%3D1">我和月亮说句话</a>）。

红影发表于 2022-11-26 12:56

一系列杀猪杀牛刀飞舞，就让range变成了想要的模样，黑黑武功高强{:4_199:}

马黑黑 发表于 2022-11-26 12:57

红影发表于 2022-11-26 12:56
一系列杀猪杀牛刀飞舞，就让range变成了想要的模样，黑黑武功高强

杀猪宰牛是俺的本行

小辣椒 发表于 2022-11-26 13:20

这个我看不懂，但还是看了一遍

生动的教学方法~~~~~

笨学生就坐教室后面，假装听课，做做小动作，然后等下课。

马黑黑 发表于 2022-11-26 13:22

小辣椒发表于 2022-11-26 13:20
这个我看不懂，但还是看了一遍

生动的教学方法~~~~~

看看，这就是假装听话的孩纸{:4_170:}

小辣椒 发表于 2022-11-26 13:22

JS杀牛刀的作用原来这么大，难怪黑黑喜欢杀猪这个工作{:4_170:}

小辣椒 发表于 2022-11-26 13:26

马黑黑发表于 2022-11-26 13:22
看看，这就是假装听话的孩纸

{:4_170:}

这个又说错了？

马黑黑 发表于 2022-11-26 13:27

小辣椒发表于 2022-11-26 13:26
这个又说错了？

{:4_181:}

小辣椒 发表于 2022-11-26 13:28

马黑黑发表于 2022-11-26 13:27

好吧，晚上再上来了，先去眯几分钟{:4_172:}

马黑黑 发表于 2022-11-26 13:28

小辣椒发表于 2022-11-26 13:28
好吧，晚上再上来了，先去眯几分钟

好的

马黑黑 发表于 2022-11-26 13:30

小辣椒发表于 2022-11-26 13:22
JS杀牛刀的作用原来这么大，难怪黑黑喜欢杀猪这个工作

{:4_189:}

红影发表于 2022-11-26 13:45

马黑黑发表于 2022-11-26 12:57
杀猪宰牛是俺的本行

你的猪牛两个字的定义和寻常的定义不一样的吧{:4_173:}

马黑黑 发表于 2022-11-26 16:12

红影发表于 2022-11-26 13:45
你的猪牛两个字的定义和寻常的定义不一样的吧

绝对一样

红影发表于 2022-11-26 16:38

马黑黑发表于 2022-11-26 16:12
绝对一样

如此斩钉截铁，我咋那么不信呢{:4_173:}

马黑黑 发表于 2022-11-26 16:42

红影发表于 2022-11-26 16:38
如此斩钉截铁，我咋那么不信呢

信不信没关系了，猪马牛羊相信就行

红影发表于 2022-11-26 19:28

马黑黑发表于 2022-11-26 16:42
信不信没关系了，猪马牛羊相信就行

还好我没信，否则就跟它们一样了{:4_170:}

马黑黑 发表于 2022-11-26 20:04

红影发表于 2022-11-26 19:28
还好我没信，否则就跟它们一样了

{:4_170:}

小辣椒 发表于 2022-11-26 21:03

马黑黑发表于 2022-11-26 13:28
好的

黑黑晚上好~~估计现在在喝酒{:4_191:}

小辣椒 发表于 2022-11-26 21:04

马黑黑发表于 2022-11-26 13:30

{:4_205:}
这次绝对说对的

马黑黑 发表于 2022-11-26 21:16

小辣椒发表于 2022-11-26 21:04
这次绝对说对的

不对也对

页: [1] 2 3 4

花潮论坛's Archiver

纯CSS方法：给input range整容