Styling Radio Buttons and Checkboxes

demo1.css

<!-- Demo 1 -->
<style type = 'text/css'>
    input.demo-1 { display: none }
    label.demo-1 { 
        background-color: #ddd; 
        text-shadow: 0 1px 0 #fff;
        background-image: -webkit-gradient(
            linear,
            left bottom,
            left top,
            color-stop(0.44, rgb(184,184,184)),
            color-stop(0.72, rgb(212,212,212))
        );
        background-image: -moz-linear-gradient(
            center bottom,
            rgb(184,184,184) 44%,
            rgb(212,212,212) 72%
        );
        color: #555;
        border-radius: 5px;
        padding: 10px;
        cursor: pointer;
        border: solid #000 1px;
    }
    input.demo-1:checked + label.demo-1 { 
        color: #002;
        background-color: #00f; 
        background-image: -webkit-gradient(
            linear,
            left bottom,
            left top,
            color-stop(0.44, rgb(134,235,129)),
            color-stop(0.72, rgb(165,240,153))
        );
        background-image: -moz-linear-gradient(
            center bottom,
            rgb(134,235,129) 44%,
            rgb(165,240,153) 72%
        );
        border: solid 1px #99f;
    } 
    input.demo-1:checked + label.radio {
	background-image: -webkit-gradient(
	    linear,
	    left bottom,
	    left top,
	    color-stop(0.44, rgb(54,146,227)),
	    color-stop(0.72, rgb(100,192,242))
	);
	background-image: -moz-linear-gradient(
	    center bottom,
	    rgb(54,146,227) 44%,
	    rgb(100,192,242) 72%
	);

        border: solid 1px #999;
    }
</style>

<!-- The HTML -->
<input type = 'checkbox' name = 'demo-1-a' id = 'demo-1-a' class = 'demo-1'/>
<label for = 'demo-1-a' class = 'demo-1'>Demo Checkbox A</label>
<input type = 'checkbox' name = 'demo-1-b' id = 'demo-1-b' class = 'demo-1'/>
<label for = 'demo-1-b' class = 'demo-1'>Demo Checkbox B</label>

<input type = 'radio' name = 'demo-1-r' id = 'demo-1-alpha' class = 'demo-1'/>
<label for = 'demo-1-alpha' class = 'demo-1 radio'>Alpha Radio Button</label>
<input type = 'radio' name = 'demo-1-r' id = 'demo-1-beta' class = 'demo-1'/>
<label for = 'demo-1-beta' class = 'demo-1 radio'>Beta Radio Button</label>
<input type = 'radio' name = 'demo-1-r' id = 'demo-1-gamma' class = 'demo-1'/>
<label for = 'demo-1-gamma' class = 'demo-1 radio'>Gamma Radio Button</label>