Jak zmienić kolor obramowania obszaru tekstowego na: fokus

115

Wybacz mi, to głupie pytanie, ale potrzebuję pomocy. Chcę zmienić kolor obramowania TEXTAREA przy ustawieniu ostrości. ale mój kod nie działa poprawnie.

Zobacz kod na skrzypcach .

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

Oto 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 Bystry
źródło
kolor, który wybrałeś na obramowanie, wygląda jak domyślny ...
lologic

Odpowiedzi:

240 
.input:focus {
    outline: none !important;
    border:1px solid red;
    box-shadow: 0 0 10px #719ECE;
}
dryfujący
źródło
2
Możesz także zmienić input: focus na .input: focus, ponieważ już używasz tej klasy w obszarze tekstowym. W ten sposób pozbędziesz się dodatkowego selektora.
Hoshts
1
Po prostu ciekawy, kup, dlaczego obszary outline: nonetekstowe potrzebują, ale zwykłe pola tekstowe nie?
Justin Skiles,
Myślę, że lepiej jest używać razem konturu i cienia "outline: solid 2px # 8dc63f; box-shadow: 0 0 21px # 8dc63f;" :-)
BG BRUNO
1
Ten link skrzypcowy nie istnieje.
Arpan Jain
22

Jest wejście: fokus, ponieważ istnieje textarea: 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
źródło
11
Obie zasady można łączyć w następujący sposób - input:focus, textarea:focus { outline: none !important; border-color: #719ECE; box-shadow: 0 0 10px #719ECE; }Jeśli chcesz mieć taki sam efekt na obu typach elementów.
Hitesh
8

Prawdopodobnie bardziej odpowiednim sposobem zmiany koloru konturu jest użycie outline-colorreguły CSS.

textarea {
  outline-color: #719ECE;
}

lub do wprowadzenia

input {
  outline-color: #719ECE;
}

box-shadow to nie to samo i może wyglądać inaczej niż kontur, zwłaszcza jeśli zastosujesz niestandardowe style do swojego elementu.

Grgur
źródło
1
Tak, ale czy kontur nie jest prostokątem? Niedobrze, jeśli stylizujesz przyciski / wejście za pomocą border-radius.
Joseph Kreifels II
1
W konspekcie są to, czego przeglądarki używają do wyróżniania pól, na których skupiono się na ułatwieniach dostępu. Zalecałbym trzymanie się tego, gdy tylko jest to możliwe. Oczywiście, jesteś wolny, aby utworzyć obejścia jeśli projekt jest bardzo specyficzny :)
Grgur
3

tak prosty :

 outline-color : blue !important;

cały CSS dla mojego przycisku „Reaguj boostrap” to:

.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
źródło
0

potrzebujesz tylko w zmiennej scss

$input-btn-focus-width:       .05rem !default;
Vahid Alvandi
źródło