Question

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

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

但这是我最能达到的目标。

该滑块有两个问题。如您所见，它像我的目标图片一样被裁剪并且不突出。我知道这是由溢出：隐藏引起的。但这溢出：故意存在，因为这是我对最后一个问题的建议。下一个问题是滑块的颜色和阴影。我已将其切换为红色，以便在尝试解决第一个问题时更容易看到。但是，如果我将其切换回白色，并尝试向其添加框阴影以达到目标图片中的效果，它将覆盖旧的框阴影，这使得该白色被“选中” 效果。

有人遇到这种问题还是对此有其他解决方案？谢谢：）

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

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

2 个答案: