<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 protected]"> <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> <input type="text" value="Input Text" disabled> <input type="email" value="[email protected]" disabled> <input type="tel" value="(555) 555-5555" disabled> <input type="url" value="http://" disabled> <br> <select disabled> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select> <input type="range" value="10" disabled> <br> <input type="file" disabled> <br> <input type="number" value="10" disabled> <input type="date" disabled> <br> <input type="color" value="#00ffff" disabled> <input type="search" value="keyword" disabled> <br> <textarea rows="4" disabled></textarea> <select size="4" disabled> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> <option>Option 4</option> </select> </fieldset> <fieldset> <legend>Readonly Form Eements</legend> <input type="text" value="Input Text" readonly> <input type="email" value="[email protected]" readonly> <input type="tel" value="(555) 555-5555" readonly> <input type="url" value="http://" readonly> <br> <input type="number" value="10" readonly> <br> <textarea rows="4" readonly>Lorem ipsum dolor sit amet...</textarea> </fieldset> <fieldset> <legend>Placeholders</legend> <input type="text" placeholder="Text Input"> <input type="email" placeholder="[email protected]"> <input type="tel" placeholder="(555) 555-5555"> <input type="url" placeholder="http://"> <br> <input type="number" placeholder="10"> <br> <textarea rows="4" placeholder="Your text goes here..."></textarea> </fieldset> </form>
/* 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 dibuat sebelumnya pada elemen-elemen ini */ input[type="checkbox"], input[type="image"], input[type="radio"] { width:auto; padding:0; background:none; border:none; cursor:pointer; } input[type="checkbox"], input[type="radio"] { position:relative; top:-2px; } /* set tipe kursor ke `pointer` untuk kenyamanan */ input[type="color"], input[type="file"], label, select { display:inline-block; vertical-align:middle; cursor:pointer; } /* textarea */ textarea { overflow:auto; display:block; /* set sebagai elemen blok */ width:100%; /* buat lebarnya menjadi 100% */ resize:vertical; /* agar `textarea` hanya bisa diubah ukurannya secara vertikal (lainnya: `both`, `horizontal`, `none`) */ } /* MENORMALKAN ::-moz-focus-inner PADA TOMBOL-TOMBOL DI FIREFOX */ button::-moz-focus-inner, input::-moz-focus-inner { margin:0; padding:0; border:none; outline:none; } /* PSEUDO KELAS - :hover, :focus, :active */ /* focus */ input:focus, select:focus, textarea:focus {background-color:#ffa} /* focus */ button:focus, input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus {background-color:#00f} /* hover */ button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover {background-color:#444} /* active */ button:active, input[type="button"]:active, input[type="reset"]:active, input[type="submit"]:active {background-color:#111} /* FIELDSET & LEGEND */ fieldset { margin:0 0 1em; padding:1em; border:1px solid #333; } legend { margin:0; padding:0 10px; font-weight:bold; } /* DISABLED */ button[disabled], input[disabled], select[disabled], textarea[disabled] { opacity:.7; /* buat warnanya menjadi kabur */ cursor:default; /* fallback */ cursor:not-allowed; /* CSS3 */ } /* READONLY */ input[type="date"][readonly], input[type="email"][readonly], input[type="number"][readonly], input[type="tel"][readonly], input[type="text"][readonly], input[type="url"][readonly], textarea[readonly], input[type="date"][readonly]:focus, input[type="email"][readonly]:focus, input[type="number"][readonly]:focus, input[type="tel"][readonly]:focus, input[type="text"][readonly]:focus, input[type="url"][readonly]:focus, textarea[readonly]:focus { background-color:#eee; cursor:default; } /* PLACEHOLDER */ ::-webkit-input-placeholder {color:#999} /* WebKit */ :-ms-input-placeholder {color:#999} /* IE 9+ */ ::-moz-placeholder {color:#999} /* Firefox 19+ */ :-moz-placeholder {color:#999} /* Firefox 18- */ :placeholder {color:#999} /* W3C */ :focus::-webkit-input-placeholder {color:#b9b989} :focus:-ms-input-placeholder {color:#b9b989} :focus::-moz-placeholder {color:#b9b989} :focus:-moz-placeholder {color:#b9b989} :focus:placeholder {color:#b9b989}