HTML5 image icon to input placeholder
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 */
}
- You can set it as
background-imageand usetext-indentor apaddingto 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
`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" />`
<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>