Як змінити фон у радиокнопки на css

Мене недавно попросили розповісти, як поміняти фон у радиокнопки через CSS. Завдання це не тривіальна, оскільки звичайними шляхами фон радиокнопки не змінити. Однак, є обхідні шляхи, про які я в цій статті і розповім.

наводжу HTML-код:

Відео: Як змінити стандартний фон в css v34 v75 v81

class="R_button"type="Radio"name="Name"id="R_1"/ Gt; 
for="R_1"gt;опис радиокнопки 
class="R_button"type="Radio"name="Name"id="R_2"/ Gt; 
for="R_2"gt;опис радиокнопки

Зазначу важливу річ, що обов`язково повинен бути атрибут id у радиокнопки, плюс for на цей id у тега label. Без цього нічого працювати не буде.

Відео: Як змінити фон на сайті ucoz - css

І CSS-код:

.r_button { 
display: none- 
} 
 
.r_button + label { 
background: url("Radio.jpg")no-repeat scroll 00- 
cursor: pointer- 
padding-left:25px- 
} 
 
.r_button:checked+ label { 
background: url("Radio_active.jpg")no-repeat scroll 00- 
}

Відразу скажу, що "+"Означає, що стиль повинен бути застосований до label, наступного після .r_button.

Тепер поясню, як це працює. Ми приховуємо взагалі радіокнопку, тобто вона не показується. зате у label ми ставимо поле зліва, плюс зліва ставимо фон неактивній радиокнопки. Однак, ми з Вами поставили for у label. Отже, при натисканні на мітці, у нас радіокнопка включається. Отже, спрацьовує селектор ".r_button: checked + label", Який змінює у нас фон label.

Як тільки йде перемикання на іншу кнопку, відразу повертаємося до неактивного фону.

Ось таким хитрим чином можна поміняти фон у радиокнопки через CSS, а також зробити свій вигляд "активності".

Зазначу, що даний спосіб працює у всіх сучасних браузерах, за винятком IE8 і нижче. Для них доведеться писати окремий файл стилів, в яких залишити стандартні радиокнопки.

Поділися в соціальних мережах:

Схожі