IE11 显示 max/min 整数的输入类型范围

Question

在 IE11 中将输入类型的范围与数据列表一起使用时，单击时会显示一个值。如果 min/max 恰好大于或小于最大整数 (2,147,483,647)，则将显示该值而不是实际值。

代码：

<input type="range" value="0" min="-999999999999999999999" max="999999999999999999999" list="number" />
<datalist id="number">
    <option>10</option>
    <option>15</option>
    <option>30</option>
    <option>50</option>
    <option>90</option>
</datalist>

我想完全隐藏那个框，但似乎找不到要隐藏的元素。有什么想法吗？这仅在 IE11 中出现。

Answer 1

您需要在 CSS 代码中将 ms-tooltip 设置为 display: none 以隐藏那个值框。

样本CSS：

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

示例：

<!doctype html>
<html>
<head>
<style>
input[type=range]::-ms-tooltip {
    display: none;
}
</style>
</head>
<body>
<input type="range" value="0" min="-999999999999999999999" max="999999999999999999999" list="number" />
<datalist id="number">
    <option>10</option>
    <option>15</option>
    <option>30</option>
    <option>50</option>
    <option>90</option>
</datalist>
</body>
</html>

在 IE 11 浏览器中的输出：

IE11 显示 max/min 整数的输入类型范围

Input type range with IE11 showing max/min integer

html

javascript

internet-explorer