CSS/HTML: Créer des éclats en bordure autour d'un Champ de Saisie

Question

Je veux créer une décente entrées pour ma forme, et je voudrais vraiment savoir comment TWITTER ne leur éclatante de la frontière autour de leurs entrées.

Exemple/Image de Twitter frontière:

J'ai aussi ne sais pas trop comment faire pour créer des coins arrondis.

Answer 1

Ici, vous allez:

.glowing-border {
    border: 2px solid #dadada;
    border-radius: 7px;
}

.glowing-border:focus { 
    outline: none;
    border-color: #9ecaed;
    box-shadow: 0 0 10px #9ecaed;
}

Démonstration en direct: http://jsfiddle.net/simevidas/CXUpm/1/show/

(pour afficher le code pour la démo, supprimer "afficher/" de l'URL)

Answer 2

Comment quelque chose comme cela... http://jsfiddle.net/UnsungHero97/Qwpq4/1207/

CSS

input {
    border: 1px solid #4195fc; /* some kind of blue border */

    /* other CSS styles */

    /* round the corners */
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;


    /* make it glow! */
    -webkit-box-shadow: 0px 0px 4px #4195fc;
       -moz-box-shadow: 0px 0px 4px #4195fc;
            box-shadow: 0px 0px 4px #4195fc; /* some variation of blue for the shadow */

}

Answer 3

Utiliser une normale bleu bordermoyen border-radius, et un bleu box-shadow à la position 0 0.

Answer 4

SLaks frappé le clou sur la tête, mais vous voudrez peut-être regarder sur les changements pour les entrées en CSS3 en général. Coins arrondis et box-shadow sont à la fois nouvelles fonctionnalités de CSS3 et vous permettra de faire exactement ce que vous cherchez. L'un de mes liens préférés pour CSS3/HTML5 est http://diveintohtml5.ep.io/ .

Answer 5

La version modifiée peu moins éclatante version.

input {
    /* round the corners */
    //background-color: transparent;
    border: 1px solid;
    height: 20px;
    width: 160px;
    color: #CCC;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;    
}

input:focus { 
    outline:none;
    border: 1px solid #4195fc; 
    /* create a BIG glow */
    box-shadow: 0px 0px 5px #4195fc; 
    -moz-box-shadow: 0px 0px 5px #4195fc;
    -webkit-box-shadow: 0px 0px 5px #4195fc;  
}