StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POIE 9 Input element padding issue
text
Body
copied!<p>I've seen this topic come up several times: You wanna create a search-box that has a nice icon in it's right (or left) corner, that looks like it's part of the text-box but text doesn't get written under/over it, like so:</p> <p><img src="https://i.stack.imgur.com/iNhfO.png" alt="enter image description here"> (from chrome)</p> <p>Usually what people do is something like this:</p> <pre><code><div class="searchWrapper"> <input type="text" /> <div class="searchIcon"></div> </div> </code></pre> <p>And there are several posts here on Stack Overflow dealing with making this work on IE such as <a href="https://stackoverflow.com/questions/3765411/html-ie-right-padding-in-input-text-box">this</a> and <a href="https://stackoverflow.com/questions/607198/padding-a-text-input-in-ie-possible">this</a>.</p> <p>But I'm trying a different approach - I don't wanna wrap my textbox if I don't have to, and rather have it as a style applied to the <code><INPUT></code> itself.</p> <p>I've come up with this piece of CSS: <a href="http://jsfiddle.net/motig/bvV46/4/" rel="nofollow noreferrer">http://jsfiddle.net/motig/bvV46/4/</a> which works on Chrome and (after some tweaking) on IE10:</p> <p><img src="https://i.stack.imgur.com/ESLX7.png" alt="enter image description here"></p> <p>Great, but I need to support IE 9 as well (but no lower than that). This does not work on IE 9 though:</p> <p><img src="https://i.stack.imgur.com/YhIyq.png" alt="enter image description here"></p> <p>due to IE 9 (and below) ignoring the <code>padding</code> on text-boxes. Even if I set <code>line-height</code>, it becomes quirky and has the text jump back the <code>25px</code> only when it reaches the text-box's edge.</p> <p>The only workaround I can think of is using a <em>condcom</em> to wrap the text-box for IE 8 only. But that's as ugly as wrapping it in the first place. Are the any other solutions?</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload