Input[type=‘range’] 标签去除内置阴影

最新推荐文章于 2022-09-17 20:11:34 发布

Rkatsiteli

最新推荐文章于 2022-09-17 20:11:34 发布

阅读量519

点赞数

本文链接：https://blog.csdn.net/qq_16559905/article/details/124388528

版权

FRONT-END + WEB 同时被 3 个专栏收录

22 篇文章 0 订阅

订阅专栏

Vue

21 篇文章 0 订阅

订阅专栏

CSS + CSS3

13 篇文章 0 订阅

订阅专栏

这篇博客展示了如何使用HTML和CSS来创建一个具有渐变背景和自定义样式的滑块。滑块包括一个范围输入元素和一个数字输入元素，通过调整滑块可以改变数字输入的值。CSS用于清除系统默认样式并定义横条、滑块轨道和拖动块的外观，使其具有专业的视觉效果。

摘要由CSDN通过智能技术生成

在这里插入图片描述

Html

<div class="icon-num">
  <input class="gradient" type="range" min="0" max="128" value="100" style="background-size: 80% 100%;" />
  <input type="number" value="80" />
</div>

Css

<style>
  .icon-num {
    display: flex;
    justify-items: center;
    align-items: center;
    width: 200px;
    margin: 40px;
  }

  input {
    /*清除系统默认样式*/
    -webkit-appearance: none;
    border: none;
  }

  input:focus {
    outline: none;
  }

  /*横条样式*/
  .gradient {
    cursor: pointer;
    width: 100%;
    background: rgba(0, 0, 0, 0.04);
    /*设置左边颜色为#61bd12，右边颜色为#ddd*/
    background: -webkit-linear-gradient(#0064ff, #0064ff) no-repeat, #ddd;
    /*设置左边颜色为#61bd12，右边颜色为#ddd*/
    background-size: 0% 100%;
    /*设置左右宽度比例,默认0*/
    border-radius: 2px;
    height: 4px;
    /*横条的高度*/
  }

  .gradient::-webkit-slider-runnable-track {
    width: 128px;
    border-radius: 2px;
    opacity: 1;
  }

  /*拖动块的样式*/
  .gradient::-webkit-slider-thumb {
    height: 12px;
    /*拖动块高度*/
    width: 12px;
    /*拖动块宽度*/
    background: rgba(0, 100, 255, 1);
    /*拖动块背景*/
    border-radius: 50%;
    /*外观设置为圆形*/
    border: solid 1px rgba(0, 100, 255, 1);
    /*设置边框*/
  }

  input[type="number"] {
    width: 56px;
    height: 32px;
    border-radius: 4px;
    opacity: 1;
    background: rgba(0, 0, 0, 0.04);
    color: rgba(0, 0, 0, 0.9);
    font-size: 14px;
    font-weight: 400;
    font-family: "PingFang SC";
    text-align: center;
    margin-left: 8px;
  }
</style>