HTML5 image icon to input placeholder

by
  1. You can set it as background-image and use text-indent or a padding to shift the text to the right.
  2. 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

More Related Contents:

  1. Change a HTML5 input’s placeholder color with CSS
  2. Change an HTML input’s placeholder color with CSS
  3. 5 stars and the golden 5 stars are not together (When browsing with Internet explorer)
  4. How to draw this chart in html and CSS? [closed]
  5. Menu does not align correctly in Safari
  6. Canvas is stretched when using CSS but normal with “width” / “height” properties
  7. Same font except its weight seems different on different browsers
  8. Truncating long strings with CSS: feasible yet?
  9. Style input type file? [duplicate]
  10. Remove padding from columns in Bootstrap 3
  11. What is WebKit and how is it related to CSS?
  12. Is there a way to word-wrap long words in a div?
  13. Center a ‘div’ vertically in a % height ‘div’
  14. Single huge .css file vs. multiple smaller specific .css files? [closed]
  15. How to make Internet Explorer emulate pointer-events:none?
  16. xHTML/CSS: How to make inner div get 100% width minus another div width
  17. How to display a reverse-ordered list in HTML?
  18. CSS div element – how to show horizontal scroll bars only?
  19. How can I remove space (margin) above HTML header?
  20. Internet Explorer z-index bug?
  21. Image scaling causes poor quality in firefox/internet explorer but not chrome
  22. How to customize the HTML5 input range type looks using CSS?
  23. For div to extend full height
  24. How can I send an inner to the bottom of its parent ?
  25. How to make the overflow CSS property work with hidden as value
  26. How to set height property for SPAN
  27. SPAN vs DIV (inline-block)
  28. Preventing an image from being draggable or selectable without using JS
  29. Is there a way to style HTML5’s range control?
  30. Which browsers support data URIs and since which version?

Leave a Comment