Autor publikacji: Virtual Patriot - Administrator

::placeholder

Data publikacji: Styczeń 02 2017
Ostatnio edytowano: Wrzesień 07 2020

Zobacz również: w3.org - the ::placeholder pseudo-element (LV4)

Przeznaczenie selektora `::placeholder`

      ::placeholder { ... }

Za pomocą selektora ::placeholder możemy sprawić, że treść wygenerowana na podstawie wartości atrybutu placeholder interesującego nas elementu HTML zostanie umieszczona w dodatkowym pseudoelemencie.

Informacje techniczne o selektorze `::placeholder`

ograniczenie - elementy HTML

element input
element textarea

ograniczenie - właściwości CSS

Tylko następujące właściwości CSS: font, color, background, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height.

Każda przeglądarka internetowa może posiadać swój własny dodatkowy zbiór właściwości CSS, które możemy wykorzystać wraz z selektorem "::placeholder".

Przykładowa reguła CSS, selektor `::placeholder`

input::placeholder {
  color:red;
}

Wyjaśnienie przykładowej reguły CSS

      input::placeholder { color:red; }

input::placeholder: spraw, aby treść wygenerowana na podstawie wartości atrybutu placeholder jakiegokolwiek elementu input została umieszczona w dodatkowym pseudoelemencie oraz
color: była koloru
red: czerwonego

Kod źródłowy przykładowego dokumentu HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      input::placeholder {
        color:red;
      }
    </style>
  </head>

  <body>

    <label>
      Podaj dowolny ciąg znaków:
      <input type="text" placeholder="jakiś ciąg znaków">
    </label>

    <hr>

    <label>
      Podaj nazwę koloru:
      <input type="text" value="zielony">
    </label>

  </body>
</html>

Rezultat

Podaj dowolny ciąg znaków:

Podaj nazwę koloru:

Gdy element "input" posiada treść wygenerowaną na podstawie wartości swojego atrybutu "placeholder", wtedy wspomniana treść znajduje się w dodatkowym pseudoelemencie oraz jest koloru czerwonego.

Interpretacja selektora `::placeholder`

: tak
: tak
: tak
: tak
: nie
: tak

Zobacz więcej informacji o interpretacji selektora ::placeholder.