Как стилизовать radio на css

Question

Olga Pejenkova · Accepted Answer

Для стилизации элемента `input type="radio"` на CSS можно использовать следующие свойства и селекторы:

- Для изменения внешнего вида самого элемента `radio` используется псевдокласс `:checked`. Например:

```css
input[type="radio"]:checked {
   background-color: #4488ee;
}
```

- Для изменения стиля области вокруг элемента `radio` можно использовать псевдокласс `:before` или `:after`. Например:

```css
input[type="radio"]:before {
   content: "";
   display: inline-block;
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background-color: #4488ee;
}
```

- Для установки пользовательского изображения вместо стандартной радио-кнопки можно использовать свойство `background-image`:

```css
input[type="radio"] {
   display: none;
}

label {
   display: inline-block;
   width: 20px;
   height: 20px;
   background-image: url('radio-icon.png');
}

input[type="radio"]:checked + label {
   background-image: url('radio-checked-icon.png');
}
```

- Для создания анимированных эффектов при выборе элемента `radio` можно использовать свойство `transition`:

```css
input[type="radio"] {
   transition: background-color 0.3s;
}

input[type="radio"]:checked {
   background-color: #4488ee;
}
```

Это лишь небольшой набор возможностей для стилизации элемента `radio` на _CSS_. В зависимости от требований и дизайна можно использовать другие свойства и комбинации стилей для достижения нужного эффекта.

Как стилизовать radio на css

Ответы

Каталог