Hilangkan / Edit Garis Biru Pada Form Input – HTML & CSS


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:

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.

Selamat mencoba !


Jangan Lupa Share !!!

58
1 komentar, 9 shares, 58 points

Apa Reaksimu ?

Bingung Bingung
10
Bingung
Kesal Kesal
8
Kesal
OMG OMG
10
OMG
Takut Takut
9
Takut
Keren Keren
7
Keren
Sedih Sedih
2
Sedih
Posciety Tech

Advanced Competent

Official Channel Posciety.Com yang menyuguhkan informasi dan updates seputar dunia teknologi. Dikelola oleh tim Posciety Tech.

1 Komentar

Pilih Format
Artikel
Default, Membuat Artikel/Cerita
List
Listicle, Misalnya: 3 Hal yang Wajib Dilakukan Saat...
Kuis Kepribadian
Membuat kuis Tentang Kepribadian
Poll
Vote untuk Membuat Keputusan atau Mencari Saran
Meme
Membuat Meme dari Gambar Normal yang Kamu Miliki