Stylizacja stanu elementów

10.1 Pseudoklasa :focus

Pseudoklasy CSS to świetne narzędzia do stylizacji elementów w różnych stanach. Dzięki nim można poprawić interakcję użytkownika z formularzami i innymi interaktywnymi elementami na stronie internetowej. Zobaczmy, jak można używać pseudoklas :focus, :hover, :disabled i :checked do stylizacji elementów wejściowych (<input>).

Pseudoklasa :focus jest stosowana do elementu formularza, gdy otrzymuje on fokus. Zazwyczaj dzieje się to po kliknięciu na element lub po przejściu do niego za pomocą klawisza Tab. Stylizacja elementów skupionych pomaga użytkownikom lepiej orientować się w formularzu.

Przykład użycia:

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

    
      <form>
        <label for="name">Imię:</label>
        <input type="text" id="name" name="name">
      </form>
    
  

Wyjaśnienie

• border-color: zmienia kolor obramowania elementu, gdy otrzymuje fokus
• box-shadow: dodaje efekt cienia wokół elementu, aby go wyróżnić
• outline: usuwa standardową obwódkę przeglądarki, zastępując ją niestandardowym stylem

10.2 Pseudoklasa :hover

Pseudoklasa :hover jest stosowana do elementu, gdy użytkownik najeżdża na niego kursorem. Może to być użyteczne do zapewnienia wizualnej informacji zwrotnej przy interakcji z elementem.

Przykład użycia:

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

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

Wyjaśnienie

• border-color: zmienia kolor obramowania elementu, gdy kursor znajduje się nad nim
• background-color: zmienia kolor tła elementu przy najechaniu kursorem

10.3 Pseudoklasa :disabled

Pseudoklasa :disabled jest stosowana do elementów formularza, które są wyłączone, czyli nieaktywne i nie mogą być używane lub zmieniane przez użytkownika. Pomaga to użytkownikom zrozumieć, że element jest niedostępny do interakcji.

Przykład użycia:

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

    
      <form>
        <label for="username">Nazwa użytkownika:</label>
        <input type="text" id="username" name="username" disabled>
      </form>
    
  

Wyjaśnienie

• background-color: zmienia kolor tła wyłączonego elementu, aby pokazać jego nieaktywność
• color: zmienia kolor tekstu wewnątrz wyłączonego elementu
• cursor: ustawia kursor w stan "not-allowed", aby wizualnie pokazać, że element jest niedostępny

10.4 Pseudoklasa :checked

Pseudoklasa :checked jest stosowana do elementów typu checkbox i radio, które są w stanie wybranym. Pozwala to stylizować wybrane elementy, czyniąc je bardziej widocznymi.

Przykład użycia:

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

    
      <form>
        <label>
          <input type="checkbox" name="option" checked>
          Opcja 1
        </label>
        <label>
          <input type="checkbox" name="option">
          Opcja 2
        </label>
        <label>
          <input type="radio" name="choice" checked>
          Wybór 1
        </label>
        <label>
          <input type="radio" name="choice">
          Wybór 2
        </label>
      </form>
    
  

Wyjaśnienie

• background-color: zmienia kolor tła wybranego elementu
• border-color: zmienia kolor obramowania wybranego elementu

1

Zadanie

Frontend SELF PL, poziom 9, lekcja 4

Niedostępne

Skupienie pola

Skupienie pola

Otwórz

1

Zadanie

Frontend SELF PL, poziom 9, lekcja 4

Niedostępne

Nawigacja kursorem

Nawigacja kursorem

Otwórz