Add icon via :before to element

Question

I've got an <input>-element. I'd like to precede it with a search-icon using the :before selector including a SVG-font I created.

.icon-search:before { 
  content: "\f109"; 
  text-indent: -2em;
}

My problem is that the pseudo-selector :beforedoesn't seem to work with <input> Can you tell me how to make this work in the most elegant way?

This is how I want it to look once I'm done.

enter image description here

Related: http://stackoverflow.com/questions/2587669/can-i-use-the-after-pseudo-element-on-an-input-field — Josh Crozier, Mar 23 '15 at 16:35

score 3 · Answer 1 · answered Mar 23 '15 at 17:00

Here is one way to achieve this: http://jsfiddle.net/n9gjb3kr/ You need to put your input inside a div:

<div class="icon-search"><input type="text"></input></div>

.icon-search:before { 
    content: "\f109"; 
    position: absolute;
    left: 0;
    top: 0;
    height: 24px;
    width: 24px;
    margin-left: .5em;
    width: 0;
    overflow: visible;
    display: inline-block;
    line-height: 24px;
    z-index: 1;
}

.icon-search { 
    position: relative;
    line-height: 24px;
}

.icon-search > input { 
    border-radius: 12px;
    height: 24px;
    border: 1px solid black;
    margin: 0;
    padding: 0;
    padding-left: 32px;
}

score 3 · Accepted Answer · answered Mar 23 '15 at 17:17

The before/after pseudo element is contained inside the element but input can't have that, so you have to use another selector like span or div. This is an implementation similar to what bootstrap does...

FIDDLE

HTML:

<div class="wrapper">
    <div class="inputgroup"> <span class="innericon searchicon"></span>

        <input type="text" class="search" placeholder="search..." />
    </div>
</div>

CSS:

body {
    color: gray;
}
.wrapper {
    margin: 20px auto;
    width: 40%;
}
* {
    box-sizing: border-box;
}
.inputgroup {
    position:relative;
    display: inline-block;
    height: 30px;
    line-height: 30px;
    vertical-align: middle;
}
.search {
    border-radius: 8px;
    height: 30px;
    line-height: 30px;
    padding: 3px 6px 3px 32px;
    border: none;
    font-size: 13px;
    display: inline-block;
    vertical-align: middle;
    border: 1px solid #CCC;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset;
}
.inputgroup .innericon {
    position: absolute;
    top: 4px;
    left: 8px;
    z-index: 2;
    display: block;
    text-align: center;
    pointer-events: none;
}

.searchicon:before {
   content: "\f109"; 
}

I went with your approach but am using now inline SVG, thanks a lot. — Hedge, Mar 24 '15 at 15:15

score 1 · Answer 3 · answered Mar 23 '15 at 16:51

You can wrap the input into span, setting the span with position:relative and then add to input and icon position:absolute and play with margins and z-index to create the same effect. This is pretty solid for responsive as well, if you style the span and the input the right way taking the responsive design in account.

OR

Using jquery as already mentioned in the comments

Add icon via :before to element

3 Answers3