javascript - Input type range with IE11 showing max/min integer

问题描述

When using an input type of range with a datalist in IE11, a value is shown on click. If the min/max happens to be greater than or less than the max integer (2,147,483,647), that value will be shown rather than the actual value.

Code:

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

I'd like to hide that box entirely, but can't seem to find the element to hide. Any thoughts? This only occurs in IE11.

标签： javascripthtmlinternet-explorer

You need to set ms-tooltip to display: none in your CSS code to hide that value box.

Sample CSS:

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

Example:

<!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>

Output in IE 11 browser:

javascript - Input type range with IE11 showing max/min integer

问题描述

解决方案

推荐阅读