load icon in input(type=text) using placeHolder attribute

Question

i have use the following code snippet

<input type="text" class="inputtext" style="margin: 2px;" placeholder="Search">

i have own font icons, i want to display the icon in the input through placeholder. How to use the content to display the icon in the input

I have refer the following stack overflow link

stackoverflow link

but i can not achieve in my case . Is there any way to achieve this or any other documentation link for display font icon in input?

i have set the placeholder text as "\e66e; Search" and also ::-moz-placeholder::before{font-family:'webfont';} but input will be displayed like "\e66e;search" instead of icon — Raja, Mar 19 '14 at 12:57
That link you have should of provided you with everything you need — Huangism, Mar 19 '14 at 13:02
[The HTML5 placeholder attribute is not a substitute for the label element](http://www.456bereastreet.com/archive/201204/the_html5_placeholder_attribute_is_not_a_substitute_for_the_label_element/) — Quentin, Mar 19 '14 at 13:04

SW4 · Answer 1 · 2014-03-19T13:09:32.690

Assuming you're talking about adding a glyph icon and not a background image to your input, you will need to use either the :before or :after pseudo elements to inject and position one, howwever note that these are not available for input elements, so you will need to wrap your input within e.g. a span, then apply styling to this to add your placeholder icon. In the below example, I've simply added a small magnifying glass to the right hand side, though you can edit as appropriate.

Demo Fiddle (icon on right)

HTML

<span class='search'><input type="text" class="inputtext" style="margin: 2px;" placeholder="Search" /></span>

CSS

.search{
    display:inline-block;  
    position:relative;
}
.search:after{
    display:inline-block;
    position:absolute;
    right:5px;
    top:5px;
    color:grey;
    font-family:fontAwesome;
    content:'\f002';
}

Demo Fiddle (icon on left)

If you want the icon to appear on the left of the input, you need some additional CSS trickery:

input{
    border:none;
    padding-left:20px;
}
.search {
    display:inline-block;
    position:relative;
    border:1px solid grey;
}
.search:after {
    display:inline-block;
    position:absolute;
    left:3px;
    top:3px;
    color:grey;
    font-family:fontAwesome;
    content:'\f002';
}

Demo Fiddle (hiding the icon on focus)

If you wish to hide the icon on focus, you simply need to give the input a background color and a z-index with and without focus, the :focus z-index should be high enough to force it to the front to display over the icon.

CSS:

input{
    z-index:0;
    position:relative;
}
.search{
    display:inline-block;  
    position:relative;
}
.search:after{
    display:inline-block;
    position:absolute;
    right:5px;
    top:5px;
    color:grey;
    font-family:fontAwesome;
    content:'\f002';
}
input:focus{
    z-index:99;
}

provided Demo working fine but in my case i want to hide the icon while perform the editing — Raja, Mar 19 '14 at 13:06

score 1 · Answer 2 · answered Mar 19 '14 at 13:03

check this demo jsFiddle

HTML

<input type="text" class="inputtext" placeholder="Search">

CSS

input { 
    font-family: 'FontAwesome';
    background-image: url(http://www.levenmetwater.nl/static/global/images/icon-search.png);
    background-position: 10px center;
    background-repeat: no-repeat;
    text-indent: 30px;
}
input:focus {
    background-position: -20px center;
    text-indent: 0;
}

Without input:focus demo jsFiddle

load icon in input(type=text) using placeHolder attribute

2 Answers2

Demo Fiddle (icon on right)

Demo Fiddle (icon on left)

Demo Fiddle (hiding the icon on focus)

HTML

CSS