html - 使范围 HTML 输入类型样式在 Chrome 和 Internet Explorer 之间兼容
问题描述
我有一些代码在其中设置了范围类型输入字段的样式,但似乎这种样式与 IE11 不兼容。
尝试.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
希望这会帮助你。:)
推荐阅读
- django - Django 多表继承子类的空查询集
- visual-studio - Visual Studio 扩展 - 更快地获取和设置文本
- excel - 使用多种功能将数据从一张表导入另一张表
- jquery - 为什么不能显示数据表上的子行?
- android - 访问 USB 摄像头 Xamarin.Android
- python - 如何使用 python 脚本在谷歌驱动器中创建和显示文件夹?
- python - 我该如何使用 zip 功能呢?
- python - 频谱中多个峰值的高斯拟合
- r - 在 R 中的同一数据框列中查找/匹配值
- javascript - 无法设置铯标头“Access-Control-Allow-Origin”