css - 输入范围的 IE 内部刻度

标签 css internet-explorer input range

我从 MSDN 找到了这个页面,但它并没有很好的解释。

http://msdn.microsoft.com/de-de/library/windows/apps/hh465789.aspx

如何去除 IE 的输入域范围内的内部刻度。为所有 IE 提供它会很酷。

enter image description here

::-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/

相关文章:

HTML5输入类型颜色: set no color/delete color

javascript - 如何将用户输入存储在数组中

php - Magento 通过位置和 html 输出的子类别数量列出类别

html - 使用 CSS 的可按下按钮

jquery - IE8 CurvyCorners.net Jquery 错误 exec(1...) 为 null 或不是对象

C - 忽略 CUnit 中的用户输入?

python - 如何在 Flask 中阻止子模板继承父 css 类

html - 不同浏览器的 CSS 问题

javascript 适用于除 IE 之外的所有浏览器

javascript - window.resize 事件在 Internet Explorer 中触发