输入类型范围滑块拇指显示修复答案

【问题标题】：Input type range slider thumb display fix输入类型范围滑块拇指显示修复
【发布时间】：2020-08-22 08:36:36
【问题描述】：

几天前，我就 input type range 元素的样式寻求帮助。除了一件事，一切都很好。滑块拇指未正确显示。

我的目标是这样显示。

但这是我能做到的最接近目标的。

滑块拇指有两个问题。正如你所看到的，它被裁剪了，不像我的目标图片那样突出。我知道这是由 overflow : hidden 引起的。但是那个溢出：隐藏是故意的，因为这是我对上一个问题的建议的方法。下一个问题是滑块拇指的颜色和框阴影。我已将其切换为红色，以便在尝试解决第一个问题时更明显。但是如果我将它切换回白色，并尝试为其添加框阴影以实现目标图片中的效果，它将覆盖旧的框阴影，这使得白色'选中'效果。

有没有人遇到过此类问题或有其他解决方案？谢谢你:)

body{
  background:#ccc;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    input[type='range'] {
      width: 100%;
      -webkit-appearance: none;
      background-color: #ee7b82;
      border-radius: .3em;
      position: relative;
    }
    
    input[type='range']::-webkit-slider-runnable-track {
        height: .35em;
        border: none;
        border-radius: 3px;
        color: white;
        overflow: hidden;
    }
    
    input[type='range']::-webkit-slider-thumb {
        -webkit-appearance: none;
        cursor: ew-resize;
        box-shadow: -100em 0 0 100em white;
        -webkit-appearance: none;
        border: none;
        height: 1.1em;
        width: 1.1em;
        border-radius: 50%;
        background:red;

        /* 
        Box-shadow to slider thumb,when color is changed to white,so it'll be visible, but it rewrites old box-shadow ,which is making that selected effect.
        
         background: white;
        -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
        box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
        */
        margin-top: -.2em;
    }

    input[type=range]:focus {
        outline: none;
    }
}

/*MOZ*/
input[type="range"]::-moz-range-progress {
    background-color: white; 
}

input[type="range"]::-moz-range-track {  
    background-color: #ee7b82;
}

/*IE*/
input[type="range"]::-ms-fill-lower {
    background-color: white; 
}

input[type="range"]::-ms-fill-upper {  
    background-color: #ee7b82;
}

        <div className="range">
            <p className="heading">HEIGHT</p>
            <input type="range"></input>

            <p className="heading">WEIGHT</p>
            <input type="range"></input>
        </div>

【问题讨论】：

标签： html css input

【解决方案1】：

CSS 的变化

     input[type='range'] {
     width: 100%;
     -webkit-appearance: none;
     background-color: #ee7b82;
     border-radius: .3em;
     position: relative;
     max-height: 2px;
    }

【讨论】：

【解决方案2】：

请尝试，

第一个问题改变拇指颜色 通过将其用于不同的浏览器。

::-webkit-slider-thumb //for WebKit/Blink
::-moz-range-thumb //for Firefox
::-ms-thumb //for IE

我也添加了 box-shadow

box-shadow: 0px 0px 3px 2px white;

body{
  background:#ccc;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    input[type='range'] {
      -webkit-appearance: none;
      width: 100%;
      background-color: #ccc !important;
      border-radius: .3em;
      position: relative;
      height: 1.1em;
      overflow: hidden;
    }
    
    input[type='range']::-webkit-slider-runnable-track {
        -webkit-appearance: none;
        height: .35em;
        border: none;
        border-radius: 3px;
        color: white;
        
        background:#fff;
    }
    
    input[type='range']::-moz-range-thumb{
        -webkit-appearance: none;
        cursor: ew-resize;
        box-shadow: 0px 0px 3px 2px white;
        -webkit-appearance: none;
        border: none;
        height: 1.1em;
        width: 1.1em;
        border-radius: 50%;
        background:red;
        margin-top: -.2em;
    }
    input[type='range']::-ms-thumb{
        -webkit-appearance: none;
        cursor: ew-resize;
        box-shadow: 0px 0px 3px 2px white;
        -webkit-appearance: none;
        border: none;
        height: 1.1em;
        width: 1.1em;
        border-radius: 50%;
        background:red;
        margin-top: -.2em;
    }
    input[type='range']::-webkit-slider-thumb {
        -webkit-appearance: none;
        cursor: ew-resize;
        box-shadow: 0px 0px 3px 2px white;
        border: none;
        height: 1.1em;
        width: 1.1em;
        border-radius: 50%;
        background:red;
        margin-top: -.35em;
    }

    input[type=range]:focus {
        outline: none;
    }
}

/*MOZ*/
input[type="range"]::-moz-range-progress {
    background-color: white; 
}

input[type="range"]::-moz-range-track{  
    background-color: #ee7b82;
}

/*IE*/
input[type="range"]::-ms-fill-lower {
    background-color: white; 
}

input[type="range"]::-ms-fill-upper {  
    background-color: #ee7b82;
}

<div className="range">
    <p className="heading">HEIGHT</p>
    <input type="range"></input>

    <p className="heading">WEIGHT</p>
    <input type="range"></input>
</div>

【讨论】：