2013-03-18 43 views
12

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

range input showing overlapping labels in IE 10

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

演示:jsfiddle.net/KzWrs

回答

15

为WinJS可以使用::-ms-tooltip伪元件选择器(如这里提到Remove tooltip from Slider

应用一个或多个样式的滑块(INPUT TYPE =范围)的工具提示。请注意,只有显示和可见性样式属性适用于-ms-tooltip。

...但对于IE10,它似乎不工作(至少在我测试的时候)。

::-ms-tooltipCSS documentation on MSDN for pseudo-elements上市然而有一个内容页没有链接讨论伪元素

我怀疑实施是不完整的...


编辑:当我测试它首次在Windows 8 Consumer Preview vm上测试,它可以在Windows 8 RTM上运行!

编辑:纠正破折号前缀::-ms-tooltip

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

完美。它适用于我:http://jsfiddle.net/KzWrs/1/。由于windows html应用程序在三叉戟上运行,所以[windows store应用程序参考页](http://msdn.microsoft.com/en-us/library/windows/apps/hh465805.aspx)可能足够准确,与IE10相同。它提到'display'和'visibility'是唯一可修改的属性,这对我来说已经足够了。 – gilly3 2013-03-18 22:36:50

+0

我相信应该(现在?)是':: - ms-tooltip'(注意第一个连字符)。 – 2016-06-27 20:18:59

+0

@NateWhittaker谢谢,我错过了第一个连字符 – MikeM 2016-06-28 14:58:28