HTML5 image icon to input placeholder

css html cross-browser placeholder

115,479

Solution 1

You can set it as background-image and use text-indent or a padding to shift the text to the right.
You can break it up into two elements.

Honestly, I would avoid usage of HTML5/CSS3 without a good fallback. There are just too many people using old browsers that don't support all the new fancy stuff. It will take a while before we can drop the fallback, unfortunately :(

The first method I mentioned is the safest and easiest. Both ways requires Javascript to hide the icon.

CSS:

input#search {
    background-image: url(bg.jpg);
    background-repeat: no-repeat;
    text-indent: 20px;
}

HTML:

<input type="text" id="search" name="search" onchange="hideIcon(this);" value="search" />

Javascript:

function hideIcon(self) {
    self.style.backgroundImage = 'none';
}

September 25h, 2013

I can't believe I said "Both ways requires JavaScript to hide the icon.", because this is not entirely true.

The most common timing to hide placeholder text is on change, as suggested in this answer. For icons however it's okay to hide them on focus which can be done in CSS with the active pseudo-class.

#search:active { background-image: none; }

Heck, using CSS3 you can make it fade away!

http://jsfiddle.net/2tTxE/

November 5th, 2013

Of course, there's the CSS3 ::before pseudo-elements too. Beware of browser support though!

            Chrome  Firefox     IE      Opera   Safari
:before     (yes)   1.0         8.0     4       4.0
::before    (yes)   1.5         9.0     7       4.0

https://developer.mozilla.org/en-US/docs/Web/CSS/::before

Solution 2

`CSS:

input#search{
 background-image: url(bg.jpg);
 background-repeat: no-repeat;
 text-indent: 20px;
}

input#search:focus{
 background-image:none;
}

HTML:

<input type="text" id="search" name="search" value="search" />`

Solution 3

<html>
<head>
<style> 
input[type=text] {
    width: 50%;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background-color: white;
    background-image: url('searchicon.png');
    background-position: 10px 10px; 
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;
}
</style>
</head>
<body>

<p>Input with icon:</p>

<form>
  <input type="text" name="search" placeholder="Search..">
</form>

</body>
</html>

115,479

ecesena

Updated on July 09, 2022

Comments

ecesena almost 2 years
I'd like to add an image icon to an input placeholder, like in this picture:

Please note that this is a placeholder, so when the user starts typing, the icon also disappears.

I came with the following solution for webkit (Safari+Chrome) using ::-webkit-input-placeholder and ::before. Unfortunately, the straightforward application to mozilla seems not to work.

So my question is: is there a cross-browser solution to add an image icon to an input placeholder?

Solution for webkit:
```
#myinput::-webkit-input-placeholder::before { 
    content: ' ';
    position: absolute;
    top: 2px; /* adjust icon position */
    left: 0px;
    width: 14px; /* size of a single icon */
    height: 14px;
    background-image: url("/path/to/icons.png"); /* all icons in a single file */
    background-repeat: no-repeat;
    background-position: -48px 0px; /* position of the right icon */
}
```
Robert over 10 years

@Tim Is there a way to accomplish the exact affect using "Font Awesome"?
Tim S. over 10 years

@Robert To some extend, yes. The problem is that you must use a pseudo-element (:before or :after), or you have to add additional DOM. In order to work either of them, the icon should be visible upon :hover instead of :focus because the icon is not in the input element this way. Check out the demo. With JavaScript however, you can activate the icon on focus. Whatever you prefer.
Nabi K.A.Z. almost 8 years

I thinks in September 25h, 2013 update, did you means #search:focus instead of #search:active as your sample code?!
Someone_who_likes_SE over 2 years

But it should disappear when typing starts, not on focus.