Custom Radio Buttons

HTML

<h1>With Radios</h1>
<span>
<input id="Radio1" name="Radios" type="radio" value="Option 1" checked="checked">
<label for="Radio1">Option 1</label>
</span>

<span>
<input id="Radio2" name="Radios" type="radio" value="Option 2" >
<label for="Radio2">Option 2</label>
</span>

<span>
<input id="Radio3" name="Radios" type="radio" value="Option 3" >
<label for="Radio3">Option 3</label>
</span>

<h1>With Checkboxes</h1>
<span>
<input id="Check1" name="Checks" type="checkbox" value="Item 1">
<label for="Check1">Item 1</label>
</span>

<span>
<input id="Check2" name="Checks" type="checkbox" value="Item 2">
<label for="Check2">Item 2</label>
</span>

<span>
<input id="Check3" name="Checks" type="checkbox" value="Item 3">
<label for="Check3">Item 3</label>
</span>

CSS

body {margin: 2em; font-family: Arial, Helvetica, sans-serif;}
span {
    /* style this span element so we can display nicely, this stlying is not neccessary */
    margin: 10px 0;
    display: block;
    width: 100%;
    
}

input[type="radio"], 
input[type="checkbox"] {
    /* hide the inputs */
    opacity: 0;
}

/* style your lables/button */
input[type="radio"] + label, 
input[type="checkbox"] + label {
    /* keep pointer so that you get the little hand showing when you are on a button */
    cursor: pointer;
    /* the following are the styles */
    padding: 4px 10px;
    border: 1px solid #ccc;
    background: #efefef;
    color: #aaa;
    border-radius: 3px;
    text-shadow: 1px 1px 0 rgba(0,0,0,0);
}

input[type="radio"]:checked + label,
input[type="checkbox"]:checked + label{
    /* style for the checked/selected state */
    background: #777;
    border: 1px solid #444;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.4);
    color: white;
}