So ändern Sie die Rahmenfarbe des Textbereichs auf: Fokus

113

Verzeih mir, das ist eine dumme Frage, aber ich brauche Hilfe. Ich möchte die Rahmenfarbe von TEXTAREA im Fokus ändern. aber mein Code scheint nicht richtig zu funktionieren.

Bitte sehen Sie sich den Code auf der Geige an .

<form name = "myform" method = "post" action="insert.php"  onsubmit="return validateform()" style="width:40%">
        <input type="text" placeholder="Enter Name." name="name" maxlength="300" class="input">
        <input type="email" placeholder="Enter E-mail." name="address" maxlength="300" class="input">
        <textarea placeholder="Enter Message." name="descrip" class="input" ></textarea>    
<br>
<input class="button secondary" type=submit name="submit" value="Submit" >
</form>

Hier ist das CSS

.input {
border:0; 
padding:10px; 
font-size:1.3em; 
font-family:"Ubuntu Light","Ubuntu","Ubuntu Mono","Segoe Print","Segoe UI";
color:#ccc; 
border:solid 1px #ccc; 
margin:0 0 20px; 
width:300px;
-moz-box-shadow: inset 0 0 4px rgba(0,0,0,0.2); 
-webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2); 
box-shadow: inner 0 0 4px rgba(0, 0, 0, 0.2);
-webkit-border-radius: 3px; 
-moz-border-radius: 3px; 
border-radius: 3px;

}
input:focus { 
    outline: none !important;
    border-color: #719ECE;
    box-shadow: 0 0 10px #719ECE;
}
html css Mercurial
quelle
Die Farbe, die Sie für den Rand gewählt haben, sieht aus wie die Standardfarbe ....
lologic

Antworten:

238 
.input:focus {
    outline: none !important;
    border:1px solid red;
    box-shadow: 0 0 10px #719ECE;
}
treiben
quelle
2
Sie können auch die Eingabe: focus in .input: focus ändern, da Sie diese Klasse bereits im Textbereich verwenden. Auf diese Weise wird der zusätzliche Selektor entfernt.
Hoshts
1
Nur neugierig, kaufen, warum Textbereiche benötigen outline: none, normale Textbox-Eingaben jedoch nicht?
Justin Skiles
Ich denke, es ist besser, Umriss und Schatten zusammen zu verwenden. "Umriss: fest 2px # 8dc63f; Kastenschatten: 0 0 21px # 8dc63f;" :-)
BG BRUNO
1
Dieser Geigenlink existiert nicht.
Arpan Jain
20

Es gibt eine Eingabe: Fokus, da es einen Textbereich gibt: Fokus

input:focus { 
    outline: none !important;
    border-color: #719ECE;
    box-shadow: 0 0 10px #719ECE;
}
textarea:focus { 
    outline: none !important;
    border-color: #719ECE;
    box-shadow: 0 0 10px #719ECE;
}
Philip Sumesgutner
quelle
11
Beide Regeln können wie folgt kombiniert werden - input:focus, textarea:focus { outline: none !important; border-color: #719ECE; box-shadow: 0 0 10px #719ECE; }Wenn Sie für beide Elementtypen den gleichen Effekt wünschen.
Hitesh
8

Eine wahrscheinlich geeignetere Methode zum Ändern der Umrissfarbe ist die Verwendung der outline-colorCSS-Regel.

textarea {
  outline-color: #719ECE;
}

oder zur Eingabe

input {
  outline-color: #719ECE;
}

box-shadow ist nicht ganz dasselbe und sieht möglicherweise anders aus als der Umriss, insbesondere wenn Sie Ihrem Element ein benutzerdefiniertes Styling zuweisen.

Grgur
quelle
1
Ja, aber ist der Umriss kein Rechteck? Nicht gut, wenn Sie die Schaltflächen / Eingaben mit Rahmenradius gestalten.
Joseph Kreifels II
1
Die Gliederung wird von Browsern verwendet, um fokussierte Felder für die Barrierefreiheit hervorzuheben. Ich würde empfehlen, wenn immer möglich daran festzuhalten. Natürlich können Sie Problemumgehungen erstellen, wenn Ihr Design sehr spezifisch ist :)
Grgur
2

so einfach :

 outline-color : blue !important;

Das gesamte CSS für meinen React-Boostrap-Button lautet:

.custom-btn {
    font-size:1.9em;
    background: #2f5bff;
    border: 2px solid #78e4ff;
    border-radius: 3px;
    padding: 50px 70px;
    outline-color : blue !important;
    text-transform: uppercase;
    user-select: auto;
    -moz-box-shadow: inset 0 0 4px rgba(0,0,0,0.2);
    -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}
Farbod Aprin
quelle
0

Sie brauchen nur in scss varible

$input-btn-focus-width:       .05rem !default;
Vahid Alvandi
quelle