Hide or change the value label for a range input in IE10

早过忘川 提交于 2019-12-17 19:58:12

问题


I have a range input with a custom label displaying text which corresponds to the input's value. This works well except that Internet Explorer 10 also displays its own tooltip-like label containing the value. The trouble is that this tooltip obscures my label. It also displays an integer value, where the actual value of the control is a float.

I cannot figure out how to hide the label or modify its text. It is separate from the tooltip and does not respond to the title attribute. It does not respond to z-index either, so I can't just position my label above it. I see no property mentioned in the documentation that would provide access to the label.

Demo: jsfiddle.net/KzWrs


回答1:


for WinJS you can use the ::-ms-tooltip pseudo element selector (as mentioned here Remove tooltip from Slider

Applies one or more styles to the tooltip of a slider (input type=range). Note that only display and visibility style properties are applicable for an -ms-tooltip.

...however for IE10 it doesn't appear to work (at least when I tested).

::-ms-tooltip is listed in the CSS documentation on MSDN for pseudo-elements however there's no link to a content page discussing the pseudo-element

I suspect implementation is incomplete...


EDIT: when I tested the first time it was on Windows 8 Consumer Preview vm, testing on Windows 8 RTM it works!

EDIT: corrected dash prefix ::-ms-tooltip

input[type=range]::-ms-tooltip {
    display: none;
}


来源:https://stackoverflow.com/questions/15487550/hide-or-change-the-value-label-for-a-range-input-in-ie10

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!