Effet incandescent sur la zone de texte pendant l'activité

Question

Effet incandescent sur la zone de texte tout en plaçant le curseur dans la zone de texte. Par exemple: placez le curseur dans le champ de recherche de notre page stackoverflow.com.

C'est en raison de css, mais je ne sais pas comment y parvenir .. S'il vous plaît aidez-moi.

Answer 1

Alors que l'effet que vous observez sur le stackoverflow searc La case h est probablement spécifique au navigateur (par ex. Google Chrome) il existe un moyen d'obtenir ce que vous voulez utiliser la classe pseudo CSS :focus:

#foo:focus { border: 2px solid red; }

<input id="foo" type="text"/>

Answer 2

propriété outline

http://www.w3schools.com/css/pr_outline.asp

Si vous souhaitez qu'il apparaisse en cliquant sur une zone de texte:

input:focus { outline: /* whatever */ } 

IE7 ne supporte pas le: sélecteur de mise au point, mais vous pouvez utiliser jQuery :

$("input").focus(function() { 
    $(this).css('outline','yellow solid thin'); 
}); 

Answer 3

décrivent De toute évidence est pas pris en charge par IE7 et même si elle était je doute qu'il serait « lueur ». Vous devez le faire avec une image d'arrière-plan personnalisée ou quelque chose. Il y a un exemple de le faire ici:

http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_24084560.html

BTW: Vous dites "couleur de la bordure". Une bordure n'est pas un contour. Vous pouvez simplement utiliser:

<input onfocus="this.style.border='2px solid yellow'"> 

Vous pouvez le faire avec le CSS: pseudo-classe de mise au point, mais les chances sont IE6/7 ne supporte pas.

Answer 4

Au lieu de contours, la box-shadow propriété réalise une très lisse, bel effet d'un champ texte:

field { 
    border-color: #dbdbdb; 
} 

field:focus { /* When you click on the field... */ 
    border-color: #6EA2DE; 
    box-shadow: 0px 0px 10px #6EA2DE; 
} 

est ici un JSFiddle Demo Une fois, je me suis fait montrer le code ci-dessus avec un effet de fondu de transition.

Answer 5

Code-

input[type=text], textarea { 
    -webkit-transition: all 0.30s ease-in-out; 
    -moz-transition: all 0.30s ease-in-out; 
    -ms-transition: all 0.30s ease-in-out; 
    -o-transition: all 0.30s ease-in-out; 
    outline: none; 
    padding: 3px 0px 3px 3px; 
    margin: 5px 1px 3px 0px; 
    border: 1px solid #DDDDDD; 
} 

input[type=text]:focus, textarea:focus { 
    box-shadow: 0 0 5px rgba(81, 203, 238, 1); 
    padding: 3px 0px 3px 3px; 
    margin: 5px 1px 3px 0px; 
    border: 1px solid rgba(81, 203, 238, 1); 
} 

démo- http://www.labshab.com/submit-guest-posts/