CSS Form

by

Form adalah element html yang digunakan untuk membuat formulir online.

Kita bisa mengedit tampilan form ini menjadi lebih menarik. Contoh gambar form ini jika tanpa css:

Kalau pakai CSS seperti ini:

Keren kan? Itu fungsinya diberi style.

Style input

Pertama kamu bisa mengedit input dulu. Pahami jenis-jenis input form supaya kamu tahu yang diedit.

Misal, jika input teks. Yaitu <input type="text"> maka selector cssnya adalah input[type=text].

Kode CSSnya adalah:

input[type=text] {
  width:100%;
}

Jika ingin mengedit semua jenis inputnya, maka input[type=text]{} diganti dengan input {}.

Selektor lain: input[type=password]{} , input[type=number]{}, input[type=submit]{} dll.

Atur box-sizing

Box-sizing maksudnya atur layout box atau kotak dari input. Yang biasa diatur adalah:

input[type=text], select {
  width: 100%;
  padding: 10px 18px;
  margin: 7px 0;
  display: inline-block;
  box-sizing: border-box;
}

Keterangan:

  • width: mengatur panjang input
  • padding: mengatur jarak teks elemen di dalam input
  • margin: mengatur jarak antar elemen input
  • display: mengatur tipe penempatan tampilan
  • box-sizing: supaya border sudah termasuk ukuran box

Atur warna

Warna yang biasa diatur adalah background, border dan color untuk teks form.

  <style type="text/css">
    form#background_border input[type=text],     form#background_border input[type=submit] {
      width: 100%;
      padding: 10px 18px;
      margin: 7px 0;
      display: inline-block;
      box-sizing: border-box;
      color:white;
      background-color: #5340ff;
      border:1px solid black;
    }
  </style>
<form id="background_border">
  <input type="text"><br>
  <input type="submit" value="kirim">
</form>

Hasilnya coba ketik teks, maka warna teksnya putih:


Atur style hover

hover adalah efek ketika form di klik atau kursor mengarah ke elemen tersebut.

  <style type="text/css">
    form#background_border_hover input[type=submit] {
      width: 100%;
      padding: 10px 18px;
      margin: 7px 0;
      display: inline-block;
      box-sizing: border-box;
      color:white;
      background-color: #5340ff;
      border:1px solid black;
    }
    form#background_border_hover input[type=submit]:hover {
      background: black;
      color:#5340ff;
    }
  </style>
<form id="background_border_hover">
  <input type="submit" value="Kirim"><br>
</form>

Cukup tambahkan :hover saja di setiap element yang ingin diubah efeknya. Dalam hal ini form#background_border_hover input[type=submit]. Bisa jadi cuma input:hover juga bisa, nanti efeknya di semua input type.

Hasilnya coba arahkan kursor ke tombol dibawah:


Atur focus input

:focus adalah ketika input sedang diketik atau digunakan. Contoh seperti ini:


Coba kamu isi teks diatas maka background dan border otomatis berubah kan? 

  <style type="text/css">
    form#background_focus input[type=text] {
      width: 100%;
      padding: 10px 18px;
      margin: 7px 0;
      display: inline-block;
      box-sizing: border-box;
      color:white;
      background-color: #5340ff;
      border:1px solid black;
      outline: none;
      font-size:;
    }
    form#background_focus input[type=text]:focus {
      background: #ff7e42;
      color:#5340ff;
      border:3px solid #753005;
    }
  </style>
<form id="background_focus">
  <input type="text"><br>
</form>

Tinggal tambahkan :focus saja ke form#background_focus input[type=text] menjadi form#background_focus input[type=text]:focus. Dan isi nilai style yang diinginkan.

Transisi animasi

Tinggal set panjang width:50% dan tambahkan efek transition: width 0.6s ease-in-out;

Kemudian di :focus panjang width:100%.

  <style type="text/css">
    form#background_focus_animasi input[type=text] {
      width: 50%;
      padding: 10px 18px;
      margin: 7px 0;
      display: inline-block;
      box-sizing: border-box;
      color:white;
      background-color: #5340ff;
      border:1px solid black;
      outline: none;
      font-size:;
      transition: width 0.6s ease-in-out;
    }
    form#background_focus_animasi input[type=text]:focus {
      width: 100%;
    }
  </style>
<form id="background_focus_animasi">
  <input type="text" placeholder="masukkan teks">
</form>

Sekian tutorial style form css, sialhkan berkreasi ya!

Leave a Comment