DemiuS,
чтобы использовать css нужно менять структуру сначала input type="radio" потом label - если неправ подскажите решение.
а так возможен такой вариант ... полифил classList для старых браузеров
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body{
background-color: #66FF66;
}
label{
width: 135px;
display:block;
margin:10px;
padding-left:8px;
background:url("http://code.stephenmorley.org/html-and-css/styling-checkboxes-and-radio-buttons/checks.png") no-repeat 0 0;
background-color:#FF66CC;
line-height:24px;
border:#000000 1px solid;
border-radius:15px;
color:#6f8686;
text-shadow:0 0 1px rgba(111,134,134,0.3);
}
label.check{
text-shadow:-2px 2px #346392;
font-size:24px;
color:#fff;
background-position:0 -24px;
}
input[type=radio]{
width:28px;
margin:0;
padding:0;
opacity:0;
}
em{
margin-left: 24px;
}
</style>
</head>
<body>
<script>
function ch(x){
var inputs = document.getElementsByName(x.name || "ceiling");
for (var i=0; i<inputs.length; i++) {
inputs[i].parentNode.classList[inputs[i].checked ? "add" : "remove"]("check") }
}
window.onload = ch
</script>
<div class="radio-check">
<div class="check-wrap">
<label class="check-field active" value="1">
<span class="icon"></span>
<em>Текст1</em>
<input type="radio" onchange="ch(this)" name="ceiling" id="ceiling-gipsokarton" value="1" checked>
</label>
<label class="check-field" value="2">
<span class="icon"></span>
<em>Текст2</em>
<input type="radio" onchange="ch(this)" name="ceiling" id="ceiling-gipsokarton" value="2">
</label>
<label class="check-field" value="3">
<span class="icon"></span>
<em>Текст3</em>
<input type="radio" onchange="ch(this)" name="ceiling" id="ceiling-gipsokarton" value="3">
</label>
</div>
</div>
</body>
</html>
