<p dir="auto">Do not be imported to the mainstream?</p>
<p dir="auto"><code class="notranslate"> input::-ms-clear {display: none;} </code></p>
<blockquote>
<p dir="auto">・Text in right aligned input gets cuts off when using -ms-clear<br>
<a href="http://connect.microsoft.com/IE/feedback/details/776537" rel="nofollow">http://connect.microsoft.com/IE/feedback/details/776537</a><br>
<a href="http://jsfiddle.net/qukFh/1/" rel="nofollow">http://jsfiddle.net/qukFh/1/</a></p>
<p dir="auto">・Issue with right alignment in text inputs in IE10<br>
<a href="http://connect.microsoft.com/IE/feedback/details/788605" rel="nofollow">http://connect.microsoft.com/IE/feedback/details/788605</a></p>
</blockquote>
<p dir="auto">When you add <code class="notranslate">text-align: right;</code> to a textbox (<code class="notranslate">&lt;input type="text" /&gt;</code>) the last part of the text inside the textbox isn't displayed completely in Internet Explorer 10 as soon as the textbox loses focus.</p>
<p dir="auto">As long as the textbox has focus, or when a textbox has an initial value, the text is displayed correctly. As soon you click inside the textbox and then outside of it (even without editing the text), the same problem occurs.</p>
<p dir="auto">I have created this jsFiddle with the 3.0.0 styling (version of 2013-05-08, <a class="commit-link" data-hovercard-type="commit" data-hovercard-url="https://github.com/twbs/bootstrap/commit/f03d3371513640724a88febc531f790947f68cf3/hovercard" href="https://github.com/twbs/bootstrap/commit/f03d3371513640724a88febc531f790947f68cf3"><tt>f03d337</tt></a>) to illustrate the problem: <a href="http://jsfiddle.net/a26cg/1/" rel="nofollow">http://jsfiddle.net/a26cg/1/</a></p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/f50d62bd673d0a016cba4088ceb74278a56e0051f0b5767c74c17607e0d5e3d3/68747470733a2f2f662e636c6f75642e6769746875622e636f6d2f6173736574732f3538383834342f3338353338342f64373037306664342d613638302d313165322d386465352d3365323866613762633434372e706e67"><img src="https://camo.githubusercontent.com/f50d62bd673d0a016cba4088ceb74278a56e0051f0b5767c74c17607e0d5e3d3/68747470733a2f2f662e636c6f75642e6769746875622e636f6d2f6173736574732f3538383834342f3338353338342f64373037306664342d613638302d313165322d386465352d3365323866613762633434372e706e67" alt="image" data-canonical-src="https://f.cloud.github.com/assets/588844/385384/d7070fd4-a680-11e2-8de5-3e28fa7bc447.png" style="max-width: 100%;"></a></p>
<p dir="auto">This problem is caused by the clear-icon that Internet Explorer 10 adds to a texbox when it has focus. Simply adding more <code class="notranslate">padding-right</code> to the textbox doesn't help. A hacky (but undesirable) workaround is to prevent the clear-icon from being used:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="::-ms-clear {
  display: none;
}"><pre class="notranslate"><code class="notranslate">::-ms-clear {
  display: none;
}
</code></pre></div>
<p dir="auto">This issue is the same as <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="13239964" data-permission-text="Title is private" data-url="https://github.com/twbs/bootstrap/issues/7580" data-hovercard-type="issue" data-hovercard-url="/twbs/bootstrap/issues/7580/hovercard" href="https://github.com/twbs/bootstrap/issues/7580">#7580</a>. A new issue was opened because the problem remains in 3.0.0.</p>