输入类型范围 slider 拇指显示修复

Question

几天前，我请求帮助设置输入类型范围元素的样式。 除了一件事，一切都很好。 Slider 拇指未正确显示。

我的目标是像这样显示它。

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

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

有没有人遇到过此类问题或对此有其他解决方案？ 谢谢：）

 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>

Answer 1

CSS 的变化

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

Answer 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>