Fixing IE 10 Text Box ‘X’ and Sizing Issues

I’m taking a look into the controversial new ‘X‘ that IE displays in text boxes along with text box sizing changes between IE 10 and previous versions.

Users will often  complain that they click it by accident and that it clears what they have entered. I can’t say I disagree with them. This is especially the case with smaller sized text boxes, or text boxes that have a large amount of text, or even text boxes where the text is right aligned.

Further, it seems that IE 8 and above will render text boxes wider by two pixels. The height is also slightly greater. This increase in text box width and height can be horrible for trying to convert a carefully planned Web form layout from IE quirks mode to a modern version of IE.

Here are the questions I intend to answer:

• Under what conditions is the ‘X’ rendered?
• How does one disable IE from showing the ‘X’?
• How does one set the size of the text boxes to the expected size?

Under what conditions is the ‘X’ rendered?

After some resizing of text boxes in a simple HTML page, it seems that the answer is: it depends. Specifically, it depends on the size of the text in the text box, and the version of IE that the compatibility mode is being set to.

If you are rendering for IE 8, 9, or 10, then your text areas will be rendered about 2-3 pixels wider than if you are rendering for IE 6 or quirks mode. The catch is that even if you set your page to run in quirks mode, IE 10 will still force the ‘X’ into your text boxes.

Under: <meta http-equiv=”X-UA-Compatible” content=”IE=8″>

If there is only short amount of text (say 10 or less characters), then IE will show:

1. At 81 or 82 pixels it will show a blank square but no ‘X’.
2. At 80 pixels no box or ‘X’ is shown.
3. At 83 pixels and above, the ‘X’ is always shown.

If the text is larger than the size capacity of the text box, then IE will show:

1. At 82 pixels and below, the ‘X’ is not shown, and there is no problem with a blank box.
2. At 83 pixels and above, the ‘X’ is always shown.

Under: <meta http-equiv=”X-UA-Compatible” content=”IE=5″>

Using this tag, you are telling IE to run under quirks mode. However the catch is that IE will still add the ‘X’ to your text boxes.

If there is only short amount of text (say 10 or less characters), then IE will show:

1. At 84 or 85 pixels it will show a blank square but no ‘X’.
2. At 83 pixels no box or ‘X’ is shown.
3. At 86 pixels and above, the ‘X’ is always shown.

If the text is larger than the size capacity of the text box, then IE will show:

1. At 85 pixels and below, the ‘X’ is not shown, and there is no problem with a blank box.
2. At 86 pixels and above, the ‘X’ is always shown.

How does one disable IE from showing the ‘X’?

Microsoft lets you specifically address the ‘X’ in all of your text boxes using the css:

input[type=text]::-ms-clear {

Amusingly, you can use this to change various attributes of the X in addition to simply removing it. For example, you can set the background-color to red.

Fun and styling games aside, you can completely remove the ‘X’ from your text boxes using:

input[type=text]::-ms-clear {
 display:none;
 }

This works well, and will help revert your Web forms to behave the way you and your users expect them to.

How does one set the size of the text boxes to the expected size?

The final part of the puzzle is to get your text boxes back to the height and width that you are expecting. You can do so for the various browsers using:

box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;

If you input this into a global style for your text boxes as below then all of a sudden your carefully laid out forms should once again render nicely in Internet Explorer without having to revert to forcing IE to run in quirks mode.

input{
width:85px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}

Base Example HTML page

Here is the base example HTML page. If you change the compatibility mode between IE 5 (quirks mode) and IE 10 (currently the latest version of IE), then you can test what I have been saying.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="ISO-8859-1" />
<meta http-equiv="X-UA-Compatible" content="IE=5">
<style type="text/css">
input{
text-align:right;
width:85px;
</style>
</head>
<body>
Enter some numbers:<br>
<input type="text" value="1234567890" ><br>
<input type="text" value="some more text" >
</body>
</html>

Here is the same example with our fixes for newer versions of Internet Explorer:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="ISO-8859-1" />
<meta http-equiv="X-UA-Compatible" content="IE=10">
<title>jQuery UI Dialog - Basic modal</title>
<style type="text/css">
input{
text-align:right;
width:85px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
input[type=text]::-ms-clear {
display: none;
}
</style>
</head>
<body>
Enter some numbers:<br>
<input type="text" value="1234567890" ><br>
<input type="text" value="some more text" >
</body>
</html>