Css radiobutton: Стилизация Radio Button

Leave a Comment / Css / By alexxlab / 17.08.2021

Содержание

Как оформить выделенную метку радиокнопки

Прежде всего, вам нужно скрыть первоначальные круглые кнопки, установив для свойства отображения CSS значение «none». Затем стилизуйте метки так, как вы хотите, чтобы они были по умолчанию, когда они не выбраны. В нашем примере мы устанавливаем отображение наших меток на «inline-block», а затем продолжаем стилизацию, устанавливая свойства background-color, padding, font-family, font-size и курсора.

После этого вы можете изменить стиль выбранного элемента . Используйте псевдокласс CSS :checked и соседний селектор (+). Это будет применяться к любой метке, которая следует непосредственно за проверенной радиокнопкой.

Пример оформления выделенной метки переключателя:

 

  <голова>
    Название документа
    <стиль>
      .radio-button input[type="radio"] {
        дисплей: нет;
      }
      .radio-button label {
        отображение: встроенный блок;
        цвет фона: #d1d1d1;
        отступ: 4px 11px;
        семейство шрифтов: Arial;
        размер шрифта: 18px;
        курсор: указатель;
      }
      . radio-button input[type="radio"]:checked+label {
        цвет фона: #76cf9ф;
      }
    
  
  <тело>
    <дел>
      
      Книги
      
      Фрагменты
      
      Викторины

Попробуй сам »

Результат

Книги Фрагменты викторины

В нашем следующем примере мы добавляем поле к классу «радио-кнопки», затем скрываем круглые кнопки, но иначе, чем в предыдущем примере. Для этого мы устанавливаем свойства opacity и width равными 0 и используем «фиксированное» значение свойства position.

Из соображений доступности мы меняем внешний вид, когда кнопка получает фокус, поэтому граница фокуса становится пунктирной. Этот метод также позволит изменять выделение с помощью стрелок влево и вправо. Мы также добавляем эффект наведения с помощью псевдокласса CSS :hover, чтобы при наведении курсора на другие параметры они меняли внешний вид.

Пример оформления выбранной метки переключателя с эффектом наведения:

 

  <голова>
    Название документа
    <стиль>
      .переключатель {
        поле: 15 пикселей;
      }
      .radio-button input[type="radio"] {
        непрозрачность: 0;
        положение: фиксированное;
        ширина: 0;
      }
      .radio-button label {
        отображение: встроенный блок;
        цвет фона: #d1d1d1;
        отступ: 10px 20px;
        семейство шрифтов: без засечек, Arial;
        размер шрифта: 16px;
        граница: 1px сплошная #666;
        радиус границы: 4px;
      }
      .radio-button label:hover {
        цвет фона: #b1e3c1;
      }
      .radio-button input[type="radio"]:focus + label {
        граница: 2 пикселя, пунктир #666;
      }
      .radio-button input[type="radio"]:checked + label {
        цвет фона: #76cf9ф;
        цвет границы: #666;
      }
    
  
  <тело>
    <дел>
      
      Книги
      
      Фрагменты
      
      Викторины

Попробуй сам »

Радиокнопки, настроенные с помощью CSS

Радиокнопки, настроенные с помощью CSS — AcceDe Web

перейти к содержанию Перейти к вторичному меню Версия Française

Вы находитесь здесь: Домашняя страница > Руководство AcceDe Web > Руководство по доступности основных компонентов расширенного интерфейса > Радиокнопки, настроенные с помощью CSS

Резюме

Принцип.
Основная база HTML.
CSS.
Демо.
Примеры компонентов.

Принцип

Радиокнопки — это элементы формы, которые позволяют пользователю выбрать один вариант из группы возможных вариантов.

Радиокнопки «настраиваются с помощью CSS», когда они созданы с использованием стандартного HTML-кода для радиокнопок, как указано в спецификации , но стандартные радиокнопки визуально скрыты и заменены изображениями CSS. , шрифты значков или определенные стили.

Есть несколько способов добиться этого. В приведенном ниже примере показано, как имитировать поведение стандартных радиокнопок HTML по умолчанию с помощью псевдоэлементов CSS и фоновых изображений, обеспечивая при этом их доступность.

Основная база HTML

 <набор полей>
  Вопрос
    <ул>
      
        
        Ответ 1
      
      
        
        Ответ 2
      
      […]

Основание CSS

 метка {
  заполнение: 0 0 0 2rem;
  положение: родственник;
}
ввод [тип = радио] {
  положение: абсолютное;
  непрозрачность: 0;
}
input[type=radio] + label::before,
input[type=radio] + label::after {
  содержание: '';
  положение: абсолютное;
  радиус границы: 50%;
}
input[type=radio] + label::before {
  слева: 0,5 бэр;
  верх: 0,2 бэр;
  отображение: встроенный блок;
  ширина: 0,8 бэр;
  высота: 0,8 бэр;
  окантовка: сплошная черная 0,05 бэр;
  фон: белый;
}
input[type=radio]:checked + label::after {
  слева: 0,7 бэр;
  верх: 0,4 бэр;
  окантовка: сплошная черная 0,25 бэр;
}
input[type=radio]:focus + label::before {
  контур: 0,05 бэр пунктир;
}

Демо

Вопрос?

Ответ А
Ответ Б