IE10 removes padding on input with right alignment

Question

I've come across some IE10 wierdness regarding padding in a right aligned inputfield.

Check this fiddle http://jsfiddle.net/fhWhn/

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

This removes the "IE10 icons" but what do I do if I want to keep these and keep my padding? Is there another, smarter, way of keeping the padding after onblur?

Answer 1

I ran in to this same problem. To get padding back, just set the value of the textbox on blur.

My simple solution:

$("input[type='text']").blur(function (evt){
    var $element = $(this);
    $element.val($element.val());
});

Answer 2

A possible workaround is to use the style direction: rtl; on your input, which will move the × to the left-hand side of the element. However, the behavior of using right-to-left may not be ideal for your case.