Как вариант:
| Код |
<!DOCTYPE HTML>
<meta charset="utf-8">
<title>Модные радиокнопки</title>
<style>
body { font: normal .75em/1 sans-serif; }
table { border-collapse: collapse; }
td, p { padding: .25em; }
label {
font: bold 1.333em/1 sans-serif;
display: block;
color: #888;
background-color: #ccc;
border-radius: 1em;
width: 2em;
padding: .5em 0;
text-align: center;
position: relative;
}
label:hover { color: #fff; background-color: #888; }
label.chosen { color: #fff; background-color: #c48; }
label input { position: absolute; top: -999em; }
</style>
<script>
function decorate(tr, e) {
var tgt = e.target||e.srcElement;
if (tgt.tagName == 'LABEL') {
if (tr.chosen) tr.chosen.className = '';
tgt.className = 'chosen';
tr.chosen = tgt;
}
}
</script>
<form action="" method="get">
<h2>Оцените ресторан</h2>
<table>
<tr onclick="decorate(this, event)">
<td>Кухня</td>
<td><label>1<input type="radio" name="q1" id="q1_1" value="1"></label></td>
<td><label>2<input type="radio" name="q1" id="q1_2" value="2"></label></td>
<td><label>3<input type="radio" name="q1" id="q1_3" value="3"></label></td>
<td><label>4<input type="radio" name="q1" id="q1_4" value="4"></label></td>
<td><label>5<input type="radio" name="q1" id="q1_5" value="5"></label></td>
</tr>
<tr onclick="decorate(this, event)">
<td>Напитки</td>
<td><label>1<input type="radio" name="q2" id="q2_1" value="1"></label></td>
<td><label>2<input type="radio" name="q2" id="q2_2" value="2"></label></td>
<td><label>3<input type="radio" name="q2" id="q2_3" value="3"></label></td>
<td><label>4<input type="radio" name="q2" id="q2_4" value="4"></label></td>
<td><label>5<input type="radio" name="q2" id="q2_5" value="5"></label></td>
</tr>
<tr onclick="decorate(this, event)">
<td>Обслуживание</td>
<td><label>1<input type="radio" name="q3" id="q3_1" value="1"></label></td>
<td><label>2<input type="radio" name="q3" id="q3_2" value="2"></label></td>
<td><label>3<input type="radio" name="q3" id="q3_3" value="3"></label></td>
<td><label>4<input type="radio" name="q3" id="q3_4" value="4"></label></td>
<td><label>5<input type="radio" name="q3" id="q3_5" value="5"></label></td>
</tr>
</table>
<p><input type="submit" value="Оценить"></p>
</form>
|
Суть в том, что визуальный эффект ложится на label-ы, которые передают нажатие обычным (хотя невидимым) радиобаттнонам. Для старых IE можно поэкспериментировать с закругляторами углов типа PIE либо использовать вместо круголков старые добрые фоновые картинки. Но совсем без скрипта, насколько я в курсе, никак... |