IE 10 cuts off text in text box after 100 px

Question

I have text boxes that specify with inline CSS that their width should be 200px

<input type="text" name="xxx" value="yyy" style="width: 200px;" />

IE 10 presents them as below (highlighted where text is cut off)

As soon as that textbox receives focus, all the text becomes visible (and then after it has lost focus again, the text remains visible)

Anybody have the same problem and manage to fix this?

Answer 1

I'm 99% sure this has something to do with the "clear button" in ie10.

When a textbox gets focus in ie10 a little "x" appears on the right side that allows you to clear the text.

You can remove the x by adding this to the stylesheet

::-ms-clear {
display: none;
}

Chances are there is something messing with the style of the clear button. I would suggest adding the style I pasted above and see if that fixes your issue.

Here's a fiddle that kinda replicates your issue (with bad css)

http://jsfiddle.net/qDTWw/3/

Here's a fiddle with the fix

http://jsfiddle.net/qDTWw/4/

Answer 2

I am getting the same in a password box in ie10 This workaround seems to work for me ...

$('.password').blur(function () {
    //work around for ie10 clipping text
    $(this).val($(this).val());
});