Styling Form Elements

http://www.dte.web.id

HTML

<form>
  <fieldset>
    <legend>Form Elements</legend>
    <input type="button" value="Input Button">
    <input type="submit" value="Input Submit">
    <input type="reset" 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" style="width:50px;font-size:11px;tex-align:right;" value="22">
    <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 Elements</legend>
    <input type="button" value="Input Button" disabled>
    <input type="submit" value="Input Submit" disabled>
    <input type="reset" 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...

CSS

@import url('http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700');

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

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

button,
input,
select,
textarea {
  display:inline-block;
  vertical-align:middle;
  width:170px;
  margin:4px 2px;
  padding:8px;
  font:normal normal 16px/normal "Source Sans Pro",Calibri,Arial,Sans-Serif;
  color:#666;
  line-height:normal;
  background-color:white;
  border:1px solid #ccc;
  border-top-color:#999;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  outline:none;
  outline-offset:-2px;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
  -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.1);
  -moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.1);
  box-shadow:inset 0 1px 1px rgba(0,0,0,.1);
  -webkit-transition:all .26s ease-out;
  -moz-transition:all .26s ease-out;
  -ms-transition:all .26s ease-out;
  -o-transition:all .26s ease-out;
  transition:all .26s ease-out;
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  width:auto;
  background-color:#cc0000;
  background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#cc0000),color-stop(100%,#960a00));
  background-image:-webkit-linear-gradient(top,#cc0000 0%,#960a00 100%);
  background-image:-moz-linear-gradient(top,#cc0000 0%,#960a00 100%);
  background-image:-ms-linear-gradient(top,#cc0000 0%,#960a00 100%);
  background-image:-o-linear-gradient(top,#cc0000 0%,#960a00 100%);
  background-image:linear-gradient(to bottom,#cc0000 0%,#960a00 100%);
  color:#ffefbf;
  font-weight:bold;
  text-shadow:0 -1px 0 rgba(0,0,0,.3);
  padding-right:16px;
  padding-left:16px;
  cursor:pointer;
  border-color:#9a0a00 #9a0a00 #7e0a03;
  -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 1px 1px...