Question

193

Image in placeholder html?

rated 0 times [ 200] [ 7] / answers: 1 / hits: 19744 / 12 Years ago, wed, august 1, 2012, 12:00:00

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

Google

And when the mouse focuses, it becomes like this:

Google

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jarettajb

Add To Favorites

Follow

Total Points: 678

Total Questions: 94

Total Answers: 90

Location: Guernsey

Member since Tue, Jul 6, 2021

3 Years ago

jarettajb questions

1 Remove unused Javascript base.js (Youtube iframe api)

Thu, Dec 17, 20, 00:00, 3 Years ago

1 how to define variable google when using google one tap javascript API

Thu, Dec 10, 20, 00:00, 4 Years ago

1 How do I fix this issue: node_modules/expo/AppEntry.js: [BABEL]?

Mon, Nov 9, 20, 00:00, 4 Years ago

1 node js, read a specific column from csv file and convert it to an array to be used in other function

Tue, May 12, 20, 00:00, 4 Years ago

1 Check If Array Has Value in Angular

Tue, May 12, 20, 00:00, 4 Years ago

View All

answered 12 Years ago jailynbethanies · Accepted Answer

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