Image in placeholder html?

Question

Can I do something like this with pure html and if needed css and javascript:

And when the mouse focuses, it becomes like this:

So I was thinking of an image placeholder. Am I on the right track, or is there a better/more simpler or more straightforward method?

EDIT: Just out of pure curiosity, how would I accomplish this using JavaScript, as all the current answers are all CSS-related?

Solution 1

If you only need to support the latest Browser use this:

HTML:

<input placeholder="Google Custom Search" type="search" name="q">

CSS:

#myInput::-webkit-input-placeholder {
  color: transparent;
  text-indent: -9999px;
  background-image: url("http://placehold.it/150x20");
  background-position: 0 50%;
  background-repeat: no-repeat; 
}
#myInput::-moz-placeholder {
  /* Firefox 19+ */
  color: transparent;
  text-indent: -9999px;
  background-image: url("http://placehold.it/150x20");
  background-position: 0 50%;
  background-repeat: no-repeat; 
}
#myInput:-moz-placeholder {
  /* Firefox 18- */
  color: transparent;
  text-indent: -9999px;
  background-image: url("http://placehold.it/150x20");
  background-position: 0 50%;
  background-repeat: no-repeat; 
}
#myInput:-ms-input-placeholder {
  /* IE 10- */
  color: transparent;
  text-indent: -9999px;
  background-image: url("http://placehold.it/150x20");
  background-position: 0 50%;
  background-repeat: no-repeat; 
}

JSFiddle

Browser Support

Solution 2

From my knowledge this is simply CSS background image.

http://www.w3schools.com/cssref/pr_background-image.asp

Have it look there, you can accomplish this by setting its position like here: http://www.w3schools.com/cssref/pr_background-position.asp

You can also change the background image depend on if the item is focused or not simply showing the back ground image when focused and hiding it when its not like:

#item:focus{
bacground image code here
}

More details on focus here: http://www.w3schools.com/cssref/sel_focus.asp

And some focus usage example: http://www.mozilla.org/access/keyboard/snav/css_usage.html

UPDATE WITH RESOURCE - THANKS @MrMisterMan

http://developer.mozilla.org/en/CSS/background-image

http://developer.mozilla.org/en/CSS/background-position

JAVASCRIPT:

Using JavaScript add the attribute to your element like below:

This will call your function when it has focus and pass it the input element.

Also you can detect onfocusout

Hope this helps, any questions just ask :)

Solution 3

If you need an image (google logo in the question) you should set the placeholder image as the background of the text field:

input.search {
    background-image: url("placeholder.gif");
    background-repeat: no-repeat;
}
input.search:focus {
    background-image: none;
}

Note: :focus is a pseudo-class in css, which is activated on focus