Pure CSS form element styling

by fgnass

HTML

<html> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width" /> 
</head> 
<body> 
<p><input type="text" placeholder="Text input"></p> 
<p><input type="text" value="Text input focused" autofocus></p> 
<p><textarea placeholder="Textarea"></textarea></p> 
<p><label><input type="checkbox" checked> Checkbox</label></p> 
<p><label><input type="radio" name="radio" checked> Radio</label></p> 
<p><label><input type="radio" name="radio"> Radio</label></p> 
<p><select><option>Select&hellip;</option><option>Another</option></select></p> 
<p><input type="submit" value="Submit"></p>
</body>
</html>

CSS

body {background: #fff; color: #243d6a; padding: 1em; margin: 0; font-size: 16px;}
body * {margin: 0; padding: 0; font-family: Arial, sans-serif;}
p {margin: 0 0 1em; font-size: 12px;}

input, textarea, select {
    border: 1px solid;
    border-color: #a1c2d1 #bed8e3 #d9eff6 #bed8e3;
    color: #243d6a;
    padding: 0.2em 1em;
    font-size: 12px;
    line-height: 14px;
    width: 80%;
    background: #E9F6FA;
    -webkit-appearance: none;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: #3794c3 #3794c3 #43b3e3 #3794c3;
}

textarea {
    height: 55px;
}

select {
    -moz-appearance: none !important;
    padding: 0.2em 1em;
    border-color: #a1c2d1;
    background:...