Styling Form Elements

http://www.dte.web.id

by Taufik Nurrohman

HTML

<form>
  <fieldset>
    <legend>Form Elements</legend>
    <input type="button" value="Input Button">
    <input type="button" value="Input Submit">
    <input type="button" value="Input Reset">
    <button>Button</button>
    <br>
    <input type="image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC" width="22" height="22">
    <label><input type="checkbox"> Label</label>
    <label><input type="radio"> Label</label>
    <br>
    <input type="text" value="Input Text">
    <input type="email" value="email@domain.com">
    <input type="tel" value="(555) 555-5555">
    <input type="url" value="http://">
    <br>
    <select>
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
    </select>
    <input type="range" value="10">
    <br>
    <input type="file">
    <br>
    <input type="number" value="10">
    <input type="date">
    <br>
    <input type="color" value="#00ffff">
    <input type="search" value="keyword">
    <br>
    <textarea rows="4"></textarea>
    <select size="4">
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
      <option>Option 4</option>
    </select>
    <br>
    <meter min="0" max="100" value="10">12cm</meter>
    <progress min="0" max="100" value="30">30%</progress>
  </fieldset>
  <fieldset>
    <legend>Disabled Form Eements</legend>
    <input type="button" value="Input Button" disabled>
    <input type="button" value="Input Submit" disabled>
    <input type="button" value="Input Reset" disabled>
    <button disabled>Button</button>
    <br>
    <input type="image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC" width="22" height="22" disabled>
    <label><input type="checkbox" disabled> Label</label>
    <label><input type="radio" disabled> Label</label>
    <br>
...

CSS

/* ignore this! */
body {
  margin:0;
  padding:40px;
  background-color:white;
  font:normal normal 13px/1.4 Arial,Sans-Serif;
  color:#333;
}

form {
  margin:0;
  padding:0;
}
/* ignore this! */


/* TAHAP PEMBENTUKAN ULANG */

button,
input,
select,
textarea {
  display:inline-block; /* alternatif yang lebih baik dibandingkan `display:inline` */
  vertical-align:middle; /* posisikan elemen ke tengah secara vertikal terhadap teks */
  width:170px; /* tentukan lebar elemen secara umum */
  margin:1px 0; /* tentukan `margin` elemen secara umum */
  padding:4px; /* tentukan `padding` elemen secara umum */
  font:normal normal 13px/normal Arial,Sans-Serif; /* tentukan tipe fon secara umum */
  color:#333; /* tentukan warna teks secara umum */
  line-height:normal; /* tentukan `line-height` secara umum (deklarasi `line-height` pada selektor `font` di atas biasanya tidak bekerja pada elemen `<button>`) */
  background-color:white; /* tentukan warna latar secara umum */
  border:1px solid #333; /* tentukan `border` secara umum */

  /* deklarasikan `box-sizing` yang seragam */
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;

  /* hapus outline jika mungkin */
  outline:none;
  outline-offset:-2px;
}


/* TOMBOL */

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  width:auto; /* mengembalikan ukuran lebar ke keadaan semula */
  background-color:#333; /* tentukan warna latar yang berbeda untuk elemen-elemen tombol */
  color:white; /* tentukan warna teks yang berbeda untuk elemen-elemen tombol */

  /* buat `padding` kiri dan kanan menjadi lebih lebar untuk membuatnya lebih gemuk */
  padding-right:8px;
  padding-left:8px;

  font-weight:bold; /* buat teks menjadi tebal */
  cursor:pointer; /* ubah kursor menjadi `pointer` untuk kenyamanan */
  border-color:transparent; /* opsional */
}


/* PERBAIKI DIMENSI BEBERAPA ELEMEN INI */

/* hilangkan nilai `width`, `border`, `padding`, `background` yang telah...