在IE10中隐藏或更改范围输入的值标签 [英] Hide or change the value label for a range input in IE10

问题描述

我有一个带有自定义标签的范围输入，显示对应于输入值的文本。除了Internet Explorer 10还显示其自己的包含该值的类似工具提示的标签之外，此方法运行良好。麻烦的是，这个工具提示遮盖了我的标签。它还显示一个整数值，其中控件的实际值是一个浮点数。

我无法弄清楚如何隐藏标签或修改其文本。它与工具提示分开，不响应title属性。它也不响应 z-index ，所以我不能只将我的标签放在它上面。我看到文档中没有提到可以访问的属性标签。

演示： jsfiddle.net/KzWrs

解决方案

对于WinJS，您可以使用 :: - ms-tooltip 伪元素选择器（如此处所述从滑块删除工具提示

将一个或多个样式应用于滑块的工具提示（输入类型=范围）。请注意，只有显示和可见性样式属性适用于-ms-tooltip。

...然而对于IE10，它似乎不起作用（至少在我测试时）。

:: - ms -tooltip 列在关于伪元素的MSDN上的CSS文档，但没有链接到讨论伪元素的内容页面我怀疑实现是不完整的。编辑：当我第一次测试Windows 8 Consumer Preview vm时，测试在Windows 8 RTM上工作！

编辑：更正的短划线前缀 :: - ms-tooltip

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

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

解决方案

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;
}

这篇关于在IE10中隐藏或更改范围输入的值标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！