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

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>

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖