IE10 removes padding on input with right alignment - css

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.

Answer 3

JustinStolle's answer is the best approach, I think.
Example:
input[type="text"].field-al-right{
text-align:right;
direction:rtl;
}

Answer 4

Edit: Eric's solution worked for me and is much nicer, but I'm leaving this answer here in case some future version of IE needs a different fix
New IE, New IE-specific rendering issues...
I've been debugging the same behaviour. The only thing I've found that works so far is:
Removing focus from the input (even explicitly setting the “padding-right” per element has no effect while it has focus)
Setting the padding-right value to a different value to the correct value (setting it to the correct value triggers no change, presumably because the layout system knows the computed CSS value hasn’t changed so decides no re-draw is necessary)
Waiting for a re-draw (instantly – or even after a timeout of 1 or 2 milliseconds - setting the property again to the correct value results in no change, presumably because no re-draw has taken place as per above)
Setting the property to the correct value (e.g. using $this.css("padding-right", ""), which removes any per-element value and allows the computed CSS value to take over).
However this is of course undesirable as it involves removing focus from the input when the user may be in the middle of typing.

Answer 5

have you try adding 'box-sizing' to your css?
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}