范围滑块不一致地消失?
Range slider get disappear inconsistently?
我有范围滑块,当缩小浏览器时,范围滑块会从屏幕上不一致地消失。
.slidecontainer {
width: 100%;
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 1px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
background: #4CAF50;
cursor: pointer;
}
<div class="slidecontainer">
<p>Custom range slider:</p>
<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
</div>
请说明为什么会这样?谢谢!
发生这种情况的原因是子像素渲染,有关详细解释请看这里:
在您的情况下,您可以通过在输入下方使用边框而不是背景颜色来解决此问题。这为您留下了一个 2 像素高的元素(一个透明像素,一个灰色像素),在缩放时更可靠:
.slidecontainer {
width: 100%;
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 1px;
/* Remove the background colour */
/* background: #d3d3d3; */
/* Add a border at the bottom to act as your line */
border-bottom: #d3d3d3 1px solid;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
background: #4CAF50;
cursor: pointer;
}
<div class="slidecontainer">
<p>Custom range slider:</p>
<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
</div>
我有范围滑块,当缩小浏览器时,范围滑块会从屏幕上不一致地消失。
.slidecontainer {
width: 100%;
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 1px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
background: #4CAF50;
cursor: pointer;
}
<div class="slidecontainer">
<p>Custom range slider:</p>
<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
</div>
请说明为什么会这样?谢谢!
发生这种情况的原因是子像素渲染,有关详细解释请看这里:
在您的情况下,您可以通过在输入下方使用边框而不是背景颜色来解决此问题。这为您留下了一个 2 像素高的元素(一个透明像素,一个灰色像素),在缩放时更可靠:
.slidecontainer {
width: 100%;
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 1px;
/* Remove the background colour */
/* background: #d3d3d3; */
/* Add a border at the bottom to act as your line */
border-bottom: #d3d3d3 1px solid;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
background: #4CAF50;
cursor: pointer;
}
<div class="slidecontainer">
<p>Custom range slider:</p>
<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
</div>