Стилизация состояния элементов

10.1 Псевдокласс :focus

Псевдоклассы CSS предоставляют отличные инструменты для стилизации элементов в различных состояниях. С их помощью можно улучшить взаимодействие пользователя с формами и другими интерактивными элементами на веб-странице. Рассмотрим, как можно использовать псевдоклассы :focus, :hover, :disabled и :checked для стилизации элементов ввода (<input>).

Псевдокласс :focus применяется к элементу формы, когда он получает фокус. Это обычно происходит при клике на элемент или при переходе к нему с помощью клавиши Tab. Стилизация фокусируемых элементов помогает пользователям лучше ориентироваться в форме.

Пример использования:

    
      input:focus {
        border-color: #4A90E2;
        box-shadow: 0 0 5px rgba(74, 144, 226, 0.5);
        outline: none;
      }
    
  

    
      <form>
        <label for="name">Имя:</label>
        <input type="text" id="name" name="name">
      </form>
    
  

Объяснение

• border-color: изменяет цвет границы элемента, когда он получает фокус
• box-shadow: добавляет теневой эффект вокруг элемента, чтобы выделить его
• outline: убирает стандартную обводку браузера, заменяя ее на кастомный стиль

10.2 Псевдокласс :hover

Псевдокласс :hover применяется к элементу, когда пользователь наводит на него курсор. Это может быть полезно для предоставления визуальной обратной связи при взаимодействии с элементом.

Пример использования:

    
      input:hover {
        border-color: #50E3C2;
        background-color: #F0F8FF;
      }
    
  

    
      <form>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email">
      </form>
    
  

Объяснение

• border-color: изменяет цвет границы элемента, когда курсор находится над ним
• background-color: изменяет цвет фона элемента при наведении курсора

10.3 Псевдокласс :disabled

Псевдокласс :disabled применяется к элементам формы, которые отключены, то есть неактивны и не могут быть использованы или изменены пользователем. Это помогает пользователям понимать, что элемент недоступен для взаимодействия.

Пример использования:

    
      input:disabled {
        background-color: #E0E0E0;
        color: #A0A0A0;
        cursor: not-allowed;
      }
    
  

    
      <form>
        <label for="username">Имя пользователя:</label>
        <input type="text" id="username" name="username" disabled>
      </form>
    
  

Объяснение

• background-color: изменяет цвет фона отключенного элемента, чтобы показать его неактивность
• color: изменяет цвет текста внутри отключенного элемента
• cursor: устанавливает курсор в состояние "not-allowed", чтобы визуально показать, что элемент недоступен

10.4 Псевдокласс :checked

Псевдокласс :checked применяется к элементам типа checkbox и radio, которые находятся в выбранном состоянии. Это позволяет стилизовать выбранные элементы, делая их более заметными.

Пример использования:

    
      input[type="checkbox"]:checked,
      input[type="radio"]:checked {
        background-color: #4A90E2;
        border-color: #4A90E2;
      }
    
  

    
      <form>
        <label>
          <input type="checkbox" name="option" checked>
          Вариант 1
        </label>
        <label>
          <input type="checkbox" name="option">
          Вариант 2
        </label>
        <label>
          <input type="radio" name="choice" checked>
          Выбор 1
        </label>
        <label>
          <input type="radio" name="choice">
          Выбор 2
        </label>
      </form>
    
  

Объяснение

• background-color: изменяет цвет фона выбранного элемента
• border-color: изменяет цвет границы выбранного элемента

1

Задача

Модуль 1: Web Core, 5 уровень, 9 лекция

Недоступна

Фокус поля

Фокус поля

Открыть

1

Задача

Модуль 1: Web Core, 5 уровень, 9 лекция

Недоступна

Наведение курсора

Наведение курсора

Открыть