Faire un effet lumineux autour de la zone de texte tout en étant actif

Faire effet lumineux autour de la zone de texte, tout en plaçant le curseur à l'intérieur de la zone de texte.
Par exemple : il suffit de placer le curseur à l'intérieur de la zone de texte recherche dans notre stackoverflow.com.

Sa raison de css, mais je ne sais pas comment faire.. Merci de m'aider.

source d'informationauteur praveenjayapal

  1. 11

    Tandis que l'effet que vous observez sur le stackoverflow zone de recherche est probablement le navigateur spécifique (par exemple, Google Chrome) il y a un moyen d'obtenir ce que vous voulez en utilisant le CSS :focus pseudo classe:

    #foo:focus { border: 2px solid red; }
    <input id="foo" type="text"/>
  2. 15

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

    field {
    border-color: #dbdbdb;
}

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

    Voici un JSFiddle Démo une fois, j'ai fait moi-même en montrant le code ci-dessus avec un effet de fondu de transition.

  3. 2

    Contour de la propriété

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

    Si vous souhaitez qu'il s'affiche lorsque vous cliquez sur une zone de texte:

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

    IE7 ne prend pas en charge l' :focus sélecteur, mais vous pouvez utiliser jQuery:

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

    Évidemment contour n'est pas pris en charge par IE7 et même si c'était, je doute qu'il serait "glow". Vous avez besoin de le faire avec une image de fond personnalisée ou quelque chose. Il y a un exemple ici:

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

    BTW: Vous dites "couleur de la bordure". Une frontière n'est pas un plan. Vous pouvez simplement utiliser:

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

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

  5. 0

    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/