修改原生的input样式

最新推荐文章于 2024-07-04 10:03:06 发布

三155

最新推荐文章于 2024-07-04 10:03:06 发布

阅读量623

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/beloved_jodie/article/details/131223370

版权

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .progress {
      background: -webkit-linear-gradient(top, #059CFA, #059CFA) 0% 0% / 0% 100% no-repeat;
    }

    input[type=range] {
      /*input外壳样式*/
      -webkit-appearance: none;
      border-radius: 10px;
      height: 5px;
      z-index: 10;
    }

    input[type=range]::-webkit-slider-runnable-track {
      /*轨道*/
      height: 5px;
      background: rgba(0, 0, 0, 0.2);
      border-radius: 10px;
    }

    input[type=range]::-webkit-slider-thumb {
      /*滑块*/
      -webkit-appearance: none;
      height: 15px;
      width: 15px;
      margin-top: -5px;
      background-image: radial-gradient(#fff 40%, blue 40%) !important;
      border-radius: 50%;
    }
  </style>
</head>

<body>
  <input id="progressRange" type="range" max="100" min="0" class="progress" step="1" value="0" oninput="getValue()">
  <script>
    function getValue() {
      // 获取input元素
      var progressRange=document.getElementById("progressRange")
      // 获取input输入框的值
      var value=progressRange.value;
      // 输出值
      console.log(value);
      progressRange.style.background = '-webkit-linear-gradient(top, #059CFA, #059CFA) 0% 0% /' + value + '% 100% no-repeat'
    }
  </script>
</body>

</html>