Menghilangkan / Edit Garis Biru pada Form Input – HTML & CSS
outline (Garis Luar) Warna Biru
Bagi pengguna HTML & CSS, pasti sering membuat form input misalnya: <input type="text"/>Nah, hasil dari code tersebut merupakan kolom persegi panjang yang berfungsi untuk diisi. Secara defaultnya kolom tersebut mempunyai warna garis luar hitam dan ketika di fokus (klik) akan di highlight dengan warna biru.
Fokus / Focus adalah ketika kolom input tersebut di klik dan siap menulis. Maka, cara menghilangkannya kita harus panggil si focus di CSS. Misalnya kalian sudah punya file HTML seperti ini:
<!DOCTYPE html>
<html>
<head>
<title>Tutorial Input</title>
</head>
<body>
<form>
<input type="text">
</form>
</body>
</html>
Untuk menghilangkannya silahkan tambahkan code ini pada CSS:
form input[type="text"]:focus {
outline-color: none;
}
Sekarang silahkan refresh web nya dan coba klik kotak input tadi, tidak akan muncul warna biru lagi. Selain itu, kita juga dapat merubah warnanya (jika ingin diberikan warna lain) dengan merubah sedikit code CSS tadi menjadi seperti ini:
Baca Juga:
form input[type="text"]:focus {
outline-color: #c41617;
}
Disini saya kasih contoh dengan warna #c41617, silahkan berikan warna yang kalian inginkan. Kita juga dapat memberikan gaya garis luar pada kolom input tersebut dengan cara berbagai gaya misalnya: double, strip garis ataupun titik-titik. Caranya, silahkan tambahkan code berikut dibawah outline-color tadi:
form input[type="text"]:focus {
outline-style: double;
}
double merupakan 2 garis, jadi garis luarnya lebih tebal. Untuk menggunakan garis strip silahkan ubah menjadi dashed.
Masih bingung ? Lihat : video tutorial cara hilangkan / edit outline field form HTML CSS.