css--input的type为range的样式修改_input type="range" 样式修改-CSDN博客

本文链接：https://blog.csdn.net/css33/article/details/89454263

本文介绍如何使用CSS来修改input[type=range]的样式，包括滑块、轨道和 thumb 的外观，实现自定义的滑动条效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果：

代码：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  <!-- appearance 允许您使元素看上去像标准的用户界面元素 -->
  <!-- -webkit-slider-thumb 这是type为range的input标签内的一种伪类样式,用于设置range的滑块的具体样式,该伪类只在内核为webkit/blink的浏览器中有效 -->
  <!--  -webkit-slider-thumb需要配和::-webkit-slider-runnable-track使用,否则会没有效果 -->
<style>
  .slider1 {
    -webkit-appearance: none;
    max-width: 350px;
    width: 100%;
    height: 10px;
    outline: none;
  }
  .slider1::-webkit-slider-thumb{
      -webkit-appearance: none;/*清除默认样式*/
      height:25px;/*设置滑块高度*/
      width:25px;/*设置滑块宽度*/
      background: #fff;/*设置背景色*/
      border-radius:50%;/*加个圆角边*/
      /* margin-top:-1vw; 使用position的话会导致滑块不滑动,但是绑定的value是改变的,所以这里使用margin-top去做定位*/
      box-shadow: 0 1px 1px rgba(0,0,0,.5);
      cursor: pointer;
  }
  .slider1::-webkit-slider-runnable-track{
      border-radius: 30px;
      background:#128;
      height:25px;
  }

  .slider2 {
    -webkit-appearance: none;
    max-width: 350px;
    width: 100%;
    height: 10px;
    border-radius: 5px;
    background: #1B2B33;
    outline: none;
    margin-top: 50px;
    margin-bottom: 30px
  }

  .slider2::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 1px rgba(0,0,0,.5);
    border:1px solid #eee;
    cursor: pointer;
  }

  .slider2::-moz-range-thumb {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
    cursor: pointer;
  }
</style>

  </head>
  <body>
    <input type="range" min="1" max="100" value="1" class="slider1">
      <input type="range" min="1" max="100" value="1" class="slider2">
  </body>
</html>