Web开发 ： Input Range 默认样式修改

引入

缘由来自于web开发课上的一个作业，但，看起来并没有实际的关联，我寻思金老师也不会因为我做了这个滑块而高看我多少，毕竟这真的就是有手就行。

而且退一万步说，如果我要是真的写不出来的话，大可以把这个type改成text，去掉花里胡哨然后返璞归真，直接让用户手动输入就完事了，反正用户也是我自己orz，主要还是自己想这样，来自个人奇奇怪怪的不服气。

作业截图👇

以上全部的话以及这篇博客的由来统统起源于第二点，让用户选择（或输入）图片的大小。讲真的我第一反应就是滑动条嗯，后面实际上这也很好做，但是默认的样式是蓝色填充的，我的psyduck是黄里帕齐的，俩个字：不搭。

然后就开始倒腾。

呈现结果

全部的课程记录应该会放在这👉Web开发课程记录汇总

主要之前做的时候以为是单个的作业，也就随便弄了下主页，但现在上到第六周了快（虽然但是还没到周三），感觉像是弄成连续剧一样的，好在也不是很拉跨，问题不大。

再截一个好了，图中图，不会糊

代码（js/css/html）

在改之前自己曾经想过找参数设置直接改的（毕竟粗条条也不是很难看，后面直接正香，还是改成细的吧，🌿

首先，因为是对浏览器中所有的input range进行修改的话，你得知道它叫啥，类似于类名前面要加.id名前面要加#（我靠我废话好多）

修改浏览器中默认的样式的话前面要输入input[type=range]{ }，再在大括号里面修改参数。

问题来了，具体的参数名称和含义究竟在哪看？

真是好问题，我到现在还不知道在哪里找这个api，就是想查看一下参数名和解释，找不到orz，好弱鸡一人，bww，有知道的可以留言告诉我一下不，拜托了！

目前我知道的就👇

css样式部分代码

input[type=range]{
    
    margin-top: 8px;/*上部分的填充值*/
    outline: none; 
    -webkit-appearance: none;/*清除系统默认样式*/  
    width