CSS / HTML: créer une bordure brillante autour d'un champ de saisie

171

Je veux créer des entrées décentes pour mon formulaire, et j'aimerais vraiment savoir comment TWITTER fait leur frontière lumineuse autour de leurs entrées.

Exemple / Image de la bordure Twitter:

entrez la description de l'image ici

Je ne sais pas non plus comment créer les coins arrondis.

html css input border glow Hans
la source
7
Voici un tutoriel qui vous apprend comment: effets de lueur CSS avec box-shadow
Ville
Le lien de @Town semble dysfonctionnel: boucle de redirection.
JeroldHaas

Réponses:

415

Voici:

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

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

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

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

label { 
    display:block;
    margin:20px;
    width:420px;
    overflow:auto;
    font-family:sans-serif;
    font-size:20px;
    color:#444;
    text-shadow:0 0 2px #ddd;
    padding:20px 10px 10px 0;
}

input {
    float:right;
    width:200px;
    border:2px solid #dadada;
    border-radius:7px;
    font-size:20px;
    padding:5px;
    margin-top:-10px;    
}

input:focus { 
    outline:none;
    border-color:#9ecaed;
    box-shadow:0 0 10px #9ecaed;
}
<label> Aktuelles Passwort: <input type="password"> </label>
<label> Neues Passwort: <input type="password"> </label>
Développer l'extrait

Šime Vidas
la source
4
Comment puis-je animer la lueur?
3lvis
17
@NSElvis eg transition: box-shadow linear 1s jsfiddle.net/simevidas/6LyWe/1
Šime Vidas
Très agréable. Une chose, si vous voulez que cela s'applique uniquement aux champs de saisie de texte, vous voudrez restreindre le sélecteur: input [type = text]: focus, input [type = password], input [type = textarea].
Michael Kennedy
1
@MichaelKennedy Dans les applications du monde réel, cela ne suffirait pas. L'approche standard serait des classes, par exemple .glowing-input { … }.
Šime Vidas
Bien sûr, mon argument était que s'appliquait aux boutons radio, aux boutons d'envoi, etc. qui pourraient ne pas être voulus.
Michael Kennedy
30

Que diriez-vous de quelque chose comme ça ... http://jsfiddle.net/UnsungHero97/Qwpq4/1207/

entrez la description de l'image ici

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 */

}
Hristo
la source
1
Cela ne
ralentit
1
et alors? la réponse acceptée ne fait pas de facilité d'entrée. la question d'origine (et ma réponse) a été publiée en 2011, et je suis presque sûr que les frontières brillantes de Twitter ne se sont pas non plus facilitées. de plus, la question ne se concentre pas sur la facilité d'entrée, mais plutôt sur la façon de faire briller la bordure avec des coins arrondis, ce à quoi j'ai répondu. Je ne pense pas que vous devriez voter contre moi simplement parce qu'il n'y a pas de facilité à sortir
Hristo
6

Utilisez un bleu normal border, un moyen border-radiuset un bleu box-shadowavec position 0 0.

SLaks
la source
3

Les SLaks ont frappé dans le mille, mais vous voudrez peut-être examiner les modifications apportées aux entrées dans CSS3 en général. Les coins arrondis et la boîte-ombre sont deux nouvelles fonctionnalités de CSS3 et vous permettront de faire exactement ce que vous recherchez. Un de mes liens personnels préférés pour CSS3 / HTML5 est http://diveintohtml5.ep.io/ .

DaOgre
la source
2

J'ai combiné deux des réponses précédentes ( jsfiddle ).

input {
    /* round the corners */
    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 14px #4195fc; 
    -moz-box-shadow: 0px 0px 14px #4195fc;
    -webkit-box-shadow: 0px 0px 14px #4195fc;  
}​
user1218947
la source
2

Version modifiée avec une version un peu moins éclatante.

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;  
}
Shabbir Hussain
la source
0 
input[type="text"]{
   @include 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{
  @include box-shadow(0 0 5px rgba(81, 203, 238, 1));
  -webkit-box-shadow: 0px 0px 5px #007eff;  
  -moz-box-shadow: 0px 0px 5px #007eff;  
  box-shadow: 0px 0px 5px #007eff;
}
shadi omar
la source
0

Vous trouverez ci-dessous le code utilisé par Bootstrap. Les couleurs sont un peu différentes mais le concept est le même. C'est si vous utilisez LESS pour compiler CSS:

// Form control focus state
//
// Generate a customized focus state and for any input with the specified color,
// which defaults to the `@input-focus-border` variable.
//
// We highly encourage you to not customize the default value, but instead use
// this to tweak colors on an as-needed basis. This aesthetic change is based on
// WebKit's default styles, but applicable to a wider range of browsers. Its
// usability and accessibility should be taken into account with any change.
//
// Example usage: change the default blue border and shadow to white for better
// contrast against a dark gray background.

.form-control-focus(@color: @input-border-focus) {
  @color-rgba: rgba(red(@color), green(@color), blue(@color), .6);
  &:focus {
    border-color: @color;
    outline: 0;
    .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}");
  }
}

Si vous n'utilisez pas LESS, voici la version compilée:

.form-control:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
Shital Shah
la source
0

Cela créera des champs de saisie et des zones de texte lumineux:

textarea,textarea:focus,input,input:focus{
    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
    border: 1px solid #c4c4c4;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    box-shadow: 0px 0px 8px #d9d9d9;
    -moz-box-shadow: 0px 0px 8px #d9d9d9;
    -webkit-box-shadow: 0px 0px 8px #d9d9d9;
}

input:focus,textarea:focus { 
    outline: none;
    border: 1px solid #7bc1f7;
    box-shadow: 0px 0px 8px #7bc1f7;
    -moz-box-shadow: 0px 0px 8px #7bc1f7;
    -webkit-box-shadow: 0px 0px 8px #7bc1f7;
}
rubo77
la source
0 

$('.form-fild input,.form-fild textarea').focus(function() {
    $(this).parent().addClass('open');
});

$('.form-fild input,.form-fild textarea').blur(function() {
    $(this).parent().removeClass('open');
});
.open {
  color:red;   
}
.form-fild {
	position: relative;
	margin: 30px 0;
}
.form-fild label {
	position: absolute;
	top: 5px;
	left: 10px;
	padding:5px;
}

.form-fild.open label {
	top: -25px;
	left: 10px;
	/*background: #ffffff;*/
}
.form-fild input[type="text"] {
	padding-left: 80px;
}
.form-fild textarea {
	padding-left: 80px;
}
.form-fild.open textarea, 
.form-fild.open input[type="text"] {
	padding-left: 10px;
}
textarea,
input[type="text"] {
	padding: 10px;
	width: 100%;
}
textarea,
input,
.form-fild.open label,
.form-fild label {
	-webkit-transition: all 0.2s ease-in-out;
       -moz-transition: all 0.2s ease-in-out;
         -o-transition: all 0.2s ease-in-out;
            transition: all 0.2s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
	<div class="row">
    	<form>
        <div class="form-fild">
            <label>Name :</label>
            <input type="text">
        </div>
        <div class="form-fild">
            <label>Email :</label>
            <input type="text">
        </div>
        <div class="form-fild">
            <label>Number :</label>
            <input type="text">
        </div>
        <div class="form-fild">
            <label>Message :</label>
            <textarea cols="10" rows="5"></textarea>
        </div>
    </form>
    </div>
</div>
Développer l'extrait

Dhaval Patel
la source