CSS / HTML: Erstellen Sie einen leuchtenden Rand um ein Eingabefeld

171

Ich möchte einige anständige Eingaben für mein Formular erstellen, und ich würde wirklich gerne wissen, wie TWITTER ihre leuchtende Grenze um ihre Eingaben macht.

Beispiel / Bild der Twitter-Grenze:

Geben Sie hier die Bildbeschreibung ein

Ich weiß auch nicht genau, wie ich die abgerundeten Ecken erstellen soll.

html css input border glow Hans
quelle
7
Hier ist ein Tutorial, das Ihnen zeigt, wie: CSS-Glow-Effekte mit Box-Shadow
Stadt
Der Link von @Town scheint nicht zu funktionieren: Umleitungsschleife.
JeroldHaas

Antworten:

414

Bitte schön:

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

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

Live-Demo: http://jsfiddle.net/simevidas/CXUpm/1/show/

(Um den Code für die Demo anzuzeigen, entfernen Sie "show /" aus der 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>
Erweitern Sie das Snippet

Šime Vidas
quelle
4
Wie kann ich das Leuchten animieren?
3.
17
@NSElvis zB transition: box-shadow linear 1s jsfiddle.net/simevidas/6LyWe/1
Šime Vidas
Sehr schön. Wenn Sie dies nur auf Texteingabefelder anwenden möchten, möchten Sie die Auswahl einschränken: Eingabe [Typ = Text]: Fokus, Eingabe [Typ = Kennwort], Eingabe [Typ = Textbereich].
Michael Kennedy
1
@MichaelKennedy In realen Anwendungen würde das nicht ausreichen. Der Standardansatz wären Klassen, z .glowing-input { … }.
Šime Vidas
Sicher, mein Punkt war, dass es sich um Optionsfelder, Senden-Schaltflächen usw. handelte, die möglicherweise nicht erwünscht waren.
Michael Kennedy
30

Wie wäre es mit so etwas ... http://jsfiddle.net/UnsungHero97/Qwpq4/1207/

Geben Sie hier die Bildbeschreibung ein

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
quelle
1
Dies lässt nicht nach und aus
rubo77
1
Na und? Die akzeptierte Antwort erleichtert das Ein- und Aussteigen nicht. Die ursprüngliche Frage (und meine Antwort) wurde 2011 veröffentlicht, und ich bin mir ziemlich sicher, dass die leuchtenden Grenzen von Twitter auch nicht nachgelassen haben. Außerdem konzentriert sich die Frage nicht auf das einfache Ein- und Aussteigen, sondern darauf, wie der Rand mit abgerundeten Ecken zum Leuchten gebracht werden kann, was ich beantwortet habe. Ich denke nicht, dass Sie mich abstimmen sollten, nur weil es kein Easy-In-Out gibt
Hristo
6

Verwenden Sie ein normales Blau border, ein Medium border-radiusund ein Blau box-shadowmit Position 0 0.

SLaks
quelle
3

SLaks haben den Nagel auf den Kopf getroffen, aber vielleicht möchten Sie die Änderungen für Eingaben in CSS3 im Allgemeinen überprüfen. Abgerundete Ecken und Box-Shadow sind neue Funktionen in CSS3 und ermöglichen es Ihnen, genau das zu tun, wonach Sie suchen. Einer meiner persönlichen Lieblingslinks für CSS3 / HTML5 ist http://diveintohtml5.ep.io/ .

DaOgre
quelle
2

Ich habe zwei der vorherigen Antworten kombiniert ( 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
quelle
2

Modifizierte Version mit etwas weniger leuchtender 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;  
}
Shabbir Hussain
quelle
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
quelle
0

Unten finden Sie den Code, den Bootstrap verwendet. Die Farben sind etwas anders, aber das Konzept ist das gleiche. Dies ist der Fall, wenn Sie WENIGER zum Kompilieren von CSS verwenden:

// 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}");
  }
}

Wenn Sie WENIGER nicht verwenden, finden Sie hier die kompilierte Version:

.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
quelle
0

Dadurch werden leuchtende Eingabefelder und Textbereiche erstellt:

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
quelle
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>
Erweitern Sie das Snippet

Dhaval Patel
quelle