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:
(from chrome)
Usually what people do is something like this:
<div class="searchWrapper">
<input type="text" />
<div class="searchIcon"></div>
</div>
And there are several posts here on Stack Overflow dealing with making this work on IE such as this and this.
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 <INPUT> itself.
I've come up with this piece of CSS: http://jsfiddle.net/motig/bvV46/4/ which works on Chrome and (after some tweaking) on IE10:
Great, but I need to support IE 9 as well (but no lower than that). This does not work on IE 9 though:
due to IE 9 (and below) ignoring the padding on text-boxes. Even if I set line-height, it becomes quirky and has the text jump back the 25px only when it reaches the text-box's edge.
The only workaround I can think of is using a condcom 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?
