Стилизация стану елементів

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: змінює колір межі вибраного елемента