Как увеличить размер чекбокса и радиопки на css? Первое что приходит а ум это width и height, но они не работают. Нужно увеличить размер самой кликабельной части, т.е. кружочек у радио и квадратик у чекбокса.
0
-
иногда zoom прокатит, а так - рисуйте с пом-ю :before/:after или label. еще вот 456bereastreet.com/lab/form_controls/checkboxes – zb' 28 сен '13 в 7:58
3 ответа
2
Посмотрите http://dimox.name/styling-input-checkboxes-using-jquery-css/ Создайте спрайт кнопок какие Вам нужны. или же
<input type="checkbox" id="c1" name="cc" />
<label for="c1"><span></span>Check Box 1</label>
input[type="checkbox"] {display:none;}
input[type="checkbox"] + label span {
display:inline-block;
width:19px;/*Размер вашей кнопки или чекбокса*/
height:19px;
margin:-1px 4px 0 0;
vertical-align:middle;
background:url(ВАШ СПРАЙТ КНОПОК) left top no-repeat;
cursor:pointer;
}
input[type="checkbox"]:checked + label span {
background:url(ВАШ СПРАЙТ КНОПОК) -19px top no-repeat;
}
Это пример когда спрайт горизонтальный.
2
Если хотите увеличить без изменения стилизации, достаточно задать такую трансформацию:
#qwe {
transform:scale(1.3);
opacity:0.9;
cursor:pointer;
}
По дефолту:
<br/>
<input type="radio" />
<input type="radio" />
<input type="radio" />
<input type="radio" />
<br/><br/>
Увеличенные:
<br/>
<input type="radio" id="qwe" />
<input type="radio" id="qwe" />
<input type="radio" id="qwe" />
<input type="radio" id="qwe" />