Cara mengubah warna batas area teks pada: fokus

115

Maafkan saya apakah ini pertanyaan bodoh, tapi saya butuh bantuan. Saya ingin mengubah warna bingkai TEXTAREA pada fokus. tapi kode saya sepertinya tidak berfungsi dengan baik.

Mohon lihat kode di biola .

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

Ini CSS-nya

.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 Lincah
sumber
warna yang Anda pilih untuk perbatasan tampak seperti warna default ....
lologic

Jawaban:

240 
.input:focus {
    outline: none !important;
    border:1px solid red;
    box-shadow: 0 0 10px #719ECE;
}
terpaut
sumber
2
Anda juga dapat mengubah input: focus menjadi .input: focus karena Anda sudah menggunakan kelas tersebut pada textarea. Dengan cara itu, Anda menyingkirkan pemilih ekstra.
Hoshts
1
Hanya ingin tahu, beli mengapa textarea membutuhkan outline: nonetapi input textbox biasa tidak?
Justin Skiles
Saya rasa lebih baik menggunakan outline dan shadow bersama-sama "outline: solid 2px # 8dc63f; box-shadow: 0 0 21px # 8dc63f;" :-)
BG BRUNO
1
Tautan biola ini tidak ada.
Arpan Jain
22

Ada input: fokus karena ada 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
sumber
11
Kedua aturan tersebut dapat digabungkan sebagai berikut - input:focus, textarea:focus { outline: none !important; border-color: #719ECE; box-shadow: 0 0 10px #719ECE; }Jika Anda ingin efek yang sama pada kedua jenis elemen.
Hitesh
8

Mungkin cara yang lebih tepat untuk mengubah warna garis besar adalah dengan menggunakan outline-coloraturan CSS.

textarea {
  outline-color: #719ECE;
}

atau untuk masukan

input {
  outline-color: #719ECE;
}

box-shadow tidak persis sama dan mungkin terlihat berbeda dari garis luar, terutama jika Anda menerapkan gaya kustom ke elemen Anda.

Grgur
sumber
1
Ya, tapi bukankah garis luarnya adalah persegi panjang? Tidak bagus jika Anda menata tombol / masukan dengan radius batas.
Joseph Kreifels II
1
Garis besar adalah apa yang digunakan browser untuk menyoroti bidang fokus untuk aksesibilitas. Saya akan merekomendasikan untuk tetap menggunakannya jika memungkinkan. Jelas, Anda bebas membuat solusi jika desain Anda sangat spesifik :)
Grgur
3

sangat sederhana :

 outline-color : blue !important;

seluruh CSS untuk tombol react-boostrap saya adalah:

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

Anda hanya perlu dalam scss varible

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