Image in placeholder html?

问题

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

Google Custom Search Image

And when the mouse focuses, it becomes like this:

Google Custom Search When Focused

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?

回答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

回答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 :)

回答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

回答4:

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.com/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

来源：https://stackoverflow.com/questions/11757196/image-in-placeholder-html

标签

javascript

html

css

textbox

placeholder