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

And when the mouse focuses, it bees 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 acplish this using JavaScript, as all the current answers are all CSS-related?

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

And when the mouse focuses, it bees 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 acplish this using JavaScript, as all the current answers are all CSS-related?

• javascript
• html
• css
• textbox
• placeholder

4 Answers 4

From my knowledge this is simply CSS background image.

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

Have it look there, you can acplish this by setting its position like here: http://www.w3schools./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./cssref/sel_focus.asp

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

UPDATE WITH RESOURCE - THANKS @MrMisterMan

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

http://developer.mozilla/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 :)

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

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

You may use just CSS.

You can give a solid border with say 4px width.
You can make round corners foor your input using moz-border or webkit-border radius.
You can use a border background image.

here you can read about css3 borders http://www.w3schools./css3/css3_borders.asp

You may try

input {
    border:2px solid #dadada;
    border-radius:7px;
    font-size:20px;
    padding:5px; 
}

input:focus { 
    outline:none;
    border-color:#9ecaed;
    box-shadow:0 0 10px #9ecaed;
}

Here is the working fiddle