L'Image dans l'espace réservé html?

Puis-je faire quelque chose comme ceci avec html pur et, si nécessaire, css et javascript:

Et lorsque la souris se concentre, il devient comme ça:

Je pensais donc à une image d'espace réservé. Suis-je sur la bonne voie, ou est-il mieux/plus simple ou plus simple méthode?

EDIT: Juste par pure curiosité, comment pourrais-je le faire à l'aide de JavaScript, comme toutes les réponses sont toutes les feuilles de style CSS sont-ils liés?

Voir ma mise à jour pour le Javascript

OriginalL'auteur think123 | 2012-08-01

Si vous avez seulement besoin de l'appui de la dernière version du Navigateur utilisez ceci:

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

Prise En Charge Du Navigateur

Un JSFiddle, ce serait bien.
Merci pour le rappel: jsfiddle.net/handtrix/HDmw2
Pour l'enregistrement, de cette façon l'espace réservé d'image ne disparaît pas lorsque le champ est concentré, juste après la saisie de quelque chose.

OriginalL'auteur HaNdTriX

5

De ma connaissance, c'est tout simplement CSS image d'arrière-plan.

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

Avez regardez là-bas, vous pouvez accomplir cela en définissant sa position comme ici: http://www.w3schools.com/cssref/pr_background-position.asp

Vous pouvez également modifier l'image d'arrière-plan dépendra de si l'élément est porté ou non, simplement en montrant le fond de l'image lors de concentré et de les cacher quand ce n'est pas comme:
```
#item:focus{
bacground image code here
}
```
Plus de détails sur l'accent ici: http://www.w3schools.com/cssref/sel_focus.asp

Et certains se concentrent exemple d'utilisation: http://www.mozilla.org/access/keyboard/snav/css_usage.html

Mise à JOUR de la RESSOURCE - MERCI @MrMisterMan

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

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

JAVASCRIPT:

À l'aide de JavaScript ajouter l'attribut à votre élément comme ci-dessous:

Cela appel de votre fonction, quand il a le focus et la passer à l'élément d'entrée.

Vous permettra également de détecter onfocusout

Espère que cette aide, des questions il suffit de demander 🙂

Un sans doute mieux de ressources sur cette (ou autre) serait developer.mozilla.org/en/CSS/background-image et developer.mozilla.org/en/CSS/background-position
Merci, n'a pas d'avis que l'on ! Bien repéré mettra à jour 🙂
Vous pouvez généralement trouver ce que vous devez savoir à partir de w3schools, mais ils sont connus pour fournir des renseignements inexacts w3fools.com
Juste point là un bon point de départ pour les débutants
Non, je le savais, j'étais tout simplement trop paresseux pour penser 😀

OriginalL'auteur LmC
2

Si vous avez besoin d'une image (logo google dans la question), vous devez définir l'espace réservé d'image comme arrière-plan du champ de texte:
```
input.search {
    background-image: url("placeholder.gif");
    background-repeat: no-repeat;
}
input.search:focus {
    background-image: none;
}
```
Remarque: :focus est une pseudo-classe dans le css, qui est activé sur l'accent

OriginalL'auteur aorcsik
0

Vous pouvez simplement utiliser CSS.

Vous pouvez donner une solide frontière avec dire 4px largeur.

Vous pouvez faire des coins ronds foor votre entrée à l'aide moz-border ou webkit-border rayon.

Vous pouvez utiliser une bordure image d'arrière-plan.

ici vous pouvez lire sur css3 frontières http://www.w3schools.com/css3/css3_borders.asp

Vous pouvez essayer
```
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;
}
```
Ici est le travail de violon

OriginalL'auteur

Vous devez vous connecter pour publier un commentaire.