我有一些代码,其中我设置了范围类型输入字段的样式,但这种样式似乎与 IE11 不兼容。
try.html
<div class="footer">
<div class="row justify-content-center">
<div class="container">
<input class="range" type="range" min="0" max="100">
</div>
</div>
</div>
样式.css
.slider{
-webkit-appearance: none;
width: 100%;
padding: 0;
height: 3px;
opacity: 1;
background: #d3d3d3;
}
.slider::-webkit-slider-thumb{
-webkit-appearance: none;
appearance: none;
border:3px solid #6452d6;
border-radius: 25px;
background-color: white;
width: 55px;
height: 20px;
}
我已经设法在 Chrome 中显示所需的设计,但此 CSS 似乎不适用于 IE11。如何让这个在IE11中正常显示?
最佳答案
请仔细阅读我的代码,您需要添加MS填充符。
body {
padding: 30px;
}
input[type=range] {
/*removes default webkit styles*/
-webkit-appearance: none;
/*fix for FF unable to apply focus style bug */
border: 1px solid white;
/*required for proper track sizing in FF*/
width: 300px;
}
input[type=range]::-webkit-slider-runnable-track {
width: 300px;
height: 5px;
background: #ddd;
border: none;
border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: goldenrod;
margin-top: -4px;
}
input[type=range]:focus {
outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #ccc;
}
input[type=range]::-moz-range-track {
width: 300px;
height: 5px;
background: #ddd;
border: none;
border-radius: 3px;
}
input[type=range]::-moz-range-thumb {
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: goldenrod;
}
/*hide the outline behind the border*/
input[type=range]:-moz-focusring{
outline: 1px solid white;
outline-offset: -1px;
}
input[type=range]::-ms-track {
width: 300px;
height: 5px;
/*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
background: transparent;
/*leave room for the larger thumb to overflow with a transparent border */
border-color: transparent;
border-width: 6px 0;
/*remove default tick marks*/
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #777;
border-radius: 10px;
}
input[type=range]::-ms-fill-upper {
background: #ddd;
border-radius: 10px;
}
input[type=range]::-ms-thumb {
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: goldenrod;
}
input[type=range]:focus::-ms-fill-lower {
background: #888;
}
input[type=range]:focus::-ms-fill-upper {
background: #ccc;
}
<div class="footer">
<div class="row justify-content-center">
<div class="container">
<input class="range" type="range" min="0" max="100">
</div>
</div>
</div>
您需要添加 MS 填充剂,如下所示:
input[type=range]::-ms-track
input[type=range]::-ms-thumb
input[type=range]::-ms-fill-upper
input[type=range]::-ms-fill-lower
欲了解更多信息,您可以访问这里 JSfiddle
希望这对您有帮助。 :)
关于html - 使范围 HTML 输入类型样式在 Chrome 和 Internet Explorer 之间兼容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59949161/