Имам написал някои код, за да помогне на "кожата" квадратчета и радио бутони, използвайки само CSS. Тя работи много, много добре ...

.... в Chrome.

Въпреки това в FireFox и IE, тя просто ... не успее. И аз нямам абсолютно никаква земна идея защо. Основната същност на това е, че зарежда блок, използващ :before преди съдържанието и след това го поставя върхуелемент по подразбиране. Разбира се, че ще бъде заменен със спрайт, но аз трябва да накарам поведението да излезе на първо място. Кодът работи така; Начинът, по който е изложен в HTML, е, че аз използвам Bootstrap, а аз просто се придържам към начина, по който излага полета. Аз също имам Цигулка, за да демонстрирам проблема.

jsBin

Включва оригиналното по-малко съдържание.

jsFiddle

Само компилиран CSS

HTML

<div class="checkbox">
<label>
<input type="checkbox" value="">
<span style="font-size: 24px;">Option</span>
</label>
</div>

ПО-МАЛКО / CSS

.checkbox, .radio {
position: relative;

& + .checkbox {
margin-top: 10px;

&.pull-left {
left: 6px;
}
}

& + .radio {
margin-top: 10px;
left: 20px;
}

input[type="checkbox"] {
&:active, &:hover, &:focus {
&:before,
&::before {
background: yellow;
}
}

&:checked,
&:active:checked,
&:hover:checked,
&:focus:checked {
&:before, &::before {
background: green;
}
}
}

input[type="radio"] {
&:active:before,
&:hover:before,
&:focus:before {
background: yellow;
}

&:checked:before,
&:active:checked:before,
&:hover:checked:before,
&:focus:checked:before {
background: green;
}
}


input[type="radio"] {
&:before, &::before {
opacity: 1;
position: absolute;
content: "";
display: block;
background: black;
height: 24px;
width: 24px;
top: 2px;
}
}

input[type="checkbox"] {
&:before, &::before {
opacity: 1;
position: absolute;
content: "";
display: block;
background: black;
height: 24px;
width: 24px;
top: 2px;
}
}

label {
line-height: 24px;
padding-left: 10px;
}
}

Отговори:

Старите браузъри, за съжаление, не могат да оформят радио бутони. Трябва да използвате подобен плъгин http://fronteed.com/iCheck/ която автоматично създава флагчета, базирани на div, които можете да създадете сами и да кликнете върху тези, които се синхронизират с действителните квадратчета.