我从 MSDN 找到了这个页面,但它并没有很好的解释。
http://msdn.microsoft.com/de-de/library/windows/apps/hh465789.aspx
如何去除 IE 的输入域范围内的内部刻度。为所有 IE 提供它会很酷。
::-ms-ticks-before, ::-ms-ticks-after {
visibility: hidden;
display: none;
}
::-ms-ticks {
visibility: hidden;
display: none;
}
::-ms-ticks-before {
visibility: hidden;
display: none;
}
::-ms-ticks-after {
visibility: hidden;
display: none;
}
::-ms-fill-upper {
background-color:#ccc;
display: none;
}
::-ms-fill-lower {
background-color: #999;
border: 0;
}
::-ms-track {
color: #ccc;
border: 0;
}
::-ms-tooltip{
display:none;
}
最佳答案
<!DOCTYPE html>
<html>
<head>
<title> input type=range -ms-ticks-before,after, -ms-track </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
#inp1 { /***(no css style)***/ }
#inp2::-ms-track { color:transparent }
#inp3::-ms-ticks-before { color:red; display:block }
#inp3::-ms-track { color:yellow }
#inp3::-ms-ticks-after { color:lime; display:block }
div { margin-left:2em }
span { font-family:'Courier New', monospace; white-space:nowrap }
</style>
</head>
<body>
<div>
<br>
<br>
<br>
<input id=inp1 type=range min=0 max=100 step=1 value=50 />
<br>
<span>
#inp1 { no css style }
</span>
<br>
<br>
<br>
<input id=inp2 type=range min=0 max=100 step=1 value=50 />
<br>
<span>
#inp2::-ms-track { color:transparent }
</span>
<br>
<br>
<br>
<input id=inp3 type=range min=0 max=100 step=1 value=50 />
<br>
<span>
#inp3::-ms-ticks-before { color:red; display:block }<br>
#inp3::-ms-track { color:yellow }<br>
#inp3::-ms-ticks-after { color:lime; display:block }
</span>
</div>
</body>
</html>
https://googledrive.com/host/0B8BLd2qPPV7XMHR3MGVVbFQ4V3M/input-type-range-ms-css.html (演示)
关于css - 输入范围的 IE 内部刻度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27189804/