如何使用 css 将图像设置为范围输入类型上的拇指滑块?它在 Internet Explorer 中不起作用。 Chrome 和 Firefox 没问题,但在 IE 上我的图像被隐藏了还是怎么的?我用::-ms-thumb
,并尝试将图像设置为背景。我怎样才能用CSS修复它?
input[type="range"]::-webkit-slider-thumb
{
-webkit-appearance: none;
background-image: url('../images/slider.png');
opacity: 1;
width: 40px;
height: 19px;
position: relative;
top: 0px;
z-index: 99;
}
::-moz-range-thumb{
background-image: url('../images/slider.png');
width:40px;
height:19px;
}
::-ms-thumb{
background-image: url('../images/slider.png');
width:40px;
height:19px;
z-index: 9999;
display: block;
background-color: transparent;
}
IE、Chrome 和 Firefox 滑块 http://imageshack.com/a/img401/9131/dqwb.jpg http://imageshack.com/a/img401/9131/dqwb.jpg
尝试使用
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE 10/11 specific style */
input[type="range"]{
-webkit-appearance: none !important;
width:497px;
height:22px;
background-image:url('.png');
background-color:rgba(0,0,0,0);
}
.slider::-webkit-slider-thumb{
-webkit-appearance: none !important;
height:70px;
width:70px;
background-image:url('.png');
}
input[type="range"]::-moz-range-track{
-moz-appearance: none;
width:497px;
height:22px;
background-image:url('.png');
background-color:rgba(0,0,0,0);
}
input[type="range"]::moz-range-thumb {
-moz-appearance: none;
height:70px;
width:70px;
background-image:none;
}
.slider
{
width: 226px;
height: 70px;
padding: 0px;
overflow: visible;
}
.slider::-ms-thumb
{
width: 70px;
height: 70px;
padding: 0px;
border: 0px;
display:block;
z-index: 99999;
background-color: transparent;
background-image: url('res/img/button.png');
background-position: center;
}
.slider:active::-ms-thumb
{
background-image: url('res/img/button.png');
}
.slider::-ms-track
{
height: 70px;
margin: 0px;
border: 0px;
padding: 0px;
color: transparent;
background-color: transparent;
}
.slider::-ms-fill-lower, .slider::-ms-fill-upper
{
height: 70px;
margin: 0px;
border: 0px;
padding: 0px;
background-color: transparent;
background-repeat: no-repeat;
}
.slider::-ms-fill-lower
{
background-image: url('res/img/slider.png');
background-position: left top;
}
.slider::-ms-fill-upper
{
background-image: url('res/img/slider.png');
background-position: right top;
}
input[type="range"].slider::-ms-tooltip
{
display: none;
}
/* IE 10/11 specific style */
}
让我知道它是否有效
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)