lueur autour de div avec une bordure et la couleur

Est-il possible d'ajouter une lueur autour de la div? Regardez connexion de twitter et comment il y a une lueur bleue autour de la zone de saisie, peut-être que le fait pour la div?

double possible de champ de Texte "lumineux" effet comme Twitter et Tumblr pages d'ouverture de session?

OriginalL'auteur DemCodeLines | 2012-03-17

  1. 12

    Voici le code complet de style une div exactement comme le twitter de connexion d'entrée. Les styles de la bordure bleue sont les box-shadow et border styles pour le sélecteur div[contenteditable]:focus. Démonstration en direct ici (cliquez).

    Balisage:

    <div contenteditable="true">Username or email</div>

    CSS:

    div[contenteditable]:focus {
  border: 1px solid rgb(86, 180, 239);
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.05) inset, 0px 0px 8px rgba(82, 168, 236, 0.6);
}

div[contenteditable] {
  width: 97%;
  max-width: 280px;
  margin-right: 10px;

  font-family: Arial,sans-serif;

  -webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,.05),0 1px 0 rgba(255,255,255,.075);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.05),0 1px 0 rgba(255,255,255,.075);

  display: inline-block;
  padding: 4px;
  margin: 0;
  outline: 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 3px;

  font-size: 13px;
  line-height: 20px;
}

    OriginalL'auteur m59

  2. 24

    CSS3 peut le faire

    -webkit-box-shadow:0 0 20px blue; 
-moz-box-shadow: 0 0 20px blue; 
box-shadow:0 0 20px blue;

    De travail JSFiddle.

    ne le montrent pas
    Ah, d'accord. Eh bien... laissez-moi voir si je peux mettre un JSFiddle pour vous. Il fonctionne pour moi.
    Ce navigateur ne peut pas afficher pour vous? Voici un exemple. jsfiddle.net/ryancowles/zs7XN
    Regardez connexion de twitter, vous savez la bordure bleue vient autour de la zone de texte lorsque vous cliquez sur elle, je veux être autour de la div.
    Pouvez-vous préciser les div?

    OriginalL'auteur Elliot Bonneville

  3. 1

    Aussi vous ferez face à un problème avec Internet Explorer tout en traitant de cette question. IE-9 Comment jamais soutient box-ombre, mais les versions précédentes ne sont pas, Check it out ici pour le faire fonctionner dans toutes les versions de IE

    OriginalL'auteur pshirishreddy

  4. 1

    Comme indiqué précédemment, l'utilisation de css: focus, border et box-shadow.

    Si vous utilisez IE, assurez-vous que <doctype> est spécifié.

    .text:focus {
    border: 1px solid #07c;
    box-shadow: 0 0 10px #07c;
}

    jsFiddle exemple.

    OriginalL'auteur Samwise