Edit in JSFiddle

<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" 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 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 type="radio" disabled> Label</label>
    <br>
    <input type="text" value="Input Text" disabled>
    <input type="email" value="email@domain.com" 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 Elements</legend>
    <input type="text" value="Input Text" readonly>
    <input type="email" value="email@domain.com" 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@domain.com">
    <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>

@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 rgba(0,0,0,.4);
  -moz-box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 1px 1px rgba(0,0,0,.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 1px 1px rgba(0,0,0,.4);
  -webkit-transition-duration:0s;
  -moz-transition-duration:0s;
  -ms-transition-duration:0s;
  -o-transition-duration:0s;
  transition-duration:0s;
}

input[type="checkbox"],
input[type="image"],
input[type="radio"] {
  width:auto;
  padding:0;
  background:none;
  border:none;
  cursor:pointer;
  -webkit-border-radius:0;
  -moz-border-radius:0;
  border-radius:0;
  -webkit-box-shadow:none !important;
  -moz-box-shadow:none !important;
  box-shadow:none !important;
}

input[type="checkbox"],
input[type="radio"] {
  position:relative;
  top:-2px;
}

input[type="color"],
input[type="file"],
label,
select {
  display:inline-block;
  vertical-align:middle;
  cursor:pointer;
}

textarea {
  overflow:auto;
  display:block;
  width:100%;
  resize:vertical;
  margin-right:0;
  margin-left:0;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  margin:0;
  padding:0;
  border:none;
  outline:none;
}

input:focus,
select:focus,
textarea:focus {
  border-color:#5079b7;
  -webkit-box-shadow:0 0 1px #5f90db,0 0 3px #5f90db,0 0 6px #5f90db;
  -moz-box-shadow:0 0 1px #5f90db,0 0 3px #5f90db,0 0 6px #5f90db;
  box-shadow:0 0 1px #5f90db,0 0 3px #5f90db,0 0 6px #5f90db;
}

button:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
  background-color:#e80000;
  background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#e80000),color-stop(100%,#ba0c00));
  background-image:-webkit-linear-gradient(top,#e80000 0%,#ba0c00 100%);
  background-image:-moz-linear-gradient(top,#e80000 0%,#ba0c00 100%);
  background-image:-ms-linear-gradient(top,#e80000 0%,#ba0c00 100%);
  background-image:-o-linear-gradient(top,#e80000 0%,#ba0c00 100%);
  background-image:linear-gradient(to bottom,#e80000 0%,#ba0c00 100%);
  border-color:#ba0c00 #ba0c00 #a20d03;
  -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 1px 1px rgba(0,0,0,.4);
  -moz-box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 1px 1px rgba(0,0,0,.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 1px 1px rgba(0,0,0,.4);
}

button:active,
input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active {
  background-image:none;
  background-color:#980900;
  border-color:transparent;
  -webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.4);
  -moz-box-shadow:inset 0 1px 2px rgba(0,0,0,.4);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.4);
}

fieldset {
  margin:0 0 1em;
  padding:1em;
  border:1px solid #ccc;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
}

legend {
  margin:0;
  padding:0 10px;
  font-weight:bold;
}

button[disabled],
input[disabled],
select[disabled],
textarea[disabled] {
  opacity:.7;
  cursor:default;
  cursor:not-allowed;
  background-image:none !important;
  background-color:#eee;
  -webkit-box-shadow:none !important;
  -moz-box-shadow:none !important;
  box-shadow:none !important;
}

button[disabled],
input[type="button"][disabled],
input[type="reset"][disabled],
input[type="submit"][disabled] {background-color:#c40200 !important}

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;
}

::-webkit-input-placeholder {color:#888}
:-ms-input-placeholder {color:#888}
::-moz-placeholder {color:#888}
:-moz-placeholder {color:#888}
:placeholder {color:#888}

:focus::-webkit-input-placeholder {color:#ccc}
:focus:-ms-input-placeholder {color:#ccc}
:focus::-moz-placeholder {color:#ccc}
:focus:-moz-placeholder {color:#ccc}
:focus:placeholder {color:#ccc}

input[type="range"] {
  height:0;
  padding:2px 0;
}