Kurs HTML

Wprowadzenie: Stylizowanie tekstu zastępczego

Elementy formularzy <input> i <textarea> mogą posiadać atrybut placeholder, który wyświetla tekst zastępczy (podpowiedź) w polu, zanim użytkownik zacznie w nim pisać.

Domyślnie tekst ten jest zazwyczaj wyświetlany jasnoszarym kolorem. Pseudoelement ::placeholder pozwala **dostosować wygląd tego tekstu zastępczego**.

Uwaga: Składnia i wsparcie dla stylizowania placeholdera różniły się historycznie między przeglądarkami. Obecnie standardem jest ::placeholder, ale dla starszych wersji mogą być potrzebne prefiksowane wersje (::-webkit-input-placeholder, ::-moz-placeholder, :-ms-input-placeholder). W nowoczesnym CSS zazwyczaj wystarczy ::placeholder.

Jak działa ::placeholder?

Pseudoelement ::placeholder wybiera tekst zastępczy wewnątrz elementu input lub textarea. Można go zastosować do konkretnego typu inputa lub globalnie.

<input type="text" placeholder="Wpisz swoje imię...">
<input type="email" placeholder="Adres e-mail" class="custom-placeholder">
<textarea placeholder="Twoja wiadomość..."></textarea>

/* Globalny styl dla wszystkich placeholderów */
::placeholder {
  color: lightcoral; /* Jasnoczerwony kolor */
  font-style: italic; /* Kursywa */
  opacity: 1; /* Upewnij się, że jest w pełni widoczny (niektóre przeglądarki mogą zmniejszać domyślnie) */
}

/* Prefiksowane wersje dla starszych przeglądarek (opcjonalnie) */
/* 
::-webkit-input-placeholder { color: lightcoral; font-style: italic; opacity: 1; }
::-moz-placeholder { color: lightcoral; font-style: italic; opacity: 1; } 
:-ms-input-placeholder { color: lightcoral; font-style: italic; opacity: 1; } 
*/

/* Specyficzny styl dla placeholderów w elementach .custom-placeholder */
.custom-placeholder::placeholder {
  color: green;
  font-style: normal;
  font-weight: bold;
}

W powyższym przykładzie:

• Placeholder w pierwszym polu input i textarea będzie jasnoczerwony i napisany kursywą (styl globalny).
• Placeholder w drugim polu input (z klasą .custom-placeholder) będzie zielony i pogrubiony (styl specyficzny nadpisuje globalny).

Dozwolone właściwości CSS dla ::placeholder

Podobnie jak w przypadku ::selection, zakres właściwości, które można stosować do ::placeholder, jest **ograniczony**. Można bezpiecznie używać właściwości wpływających na wygląd tekstu:

• Czcionka: font (i jego składowe).
• Kolor: color.
• Tło: background (choć efekt może być ograniczony do tła samego tekstu).
• Odstępy tekstu: word-spacing, letter-spacing.
• Dekoracje i transformacje: text-decoration, text-transform.
• Przezroczystość: opacity.
• Wysokość linii: line-height.

Właściwości związane z modelem pudełkowym (margin, padding, border) czy pozycjonowaniem zazwyczaj **nie działają** na ::placeholder.

Wskazówki dotyczące użycia ::placeholder

• Kontrast: Upewnij się, że kolor tekstu placeholdera ma wystarczający kontrast z tłem pola input, aby był czytelny, ale jednocześnie różnił się od koloru tekstu wprowadzanego przez użytkownika.
• Nie zastępuj etykiet: Placeholder nie powinien zastępować etykiety (<label>). Etykieta jest kluczowa dla dostępności (informuje użytkowników czytników ekranu o przeznaczeniu pola) i pozostaje widoczna po rozpoczęciu pisania. Placeholder służy jako dodatkowa podpowiedź lub przykład formatu.
• Krótkość i zwięzłość: Tekst placeholdera powinien być krótki i na temat.
• Testowanie: Sprawdź wygląd w różnych przeglądarkach, zwłaszcza jeśli zależy Ci na wsparciu dla starszych wersji.