32. :placeholder-shown - CSS3

Przeznaczenie selektora `:placeholder-shown`

:placeholder-shown { ... }

Selektor :placeholder-shown odwołuje się do każdego elementu HTML, którego cechy w danym momencie spełniają zasadę pseudoklasy :placeholder-shown.

Cechy elementu HTML spełniają zasadę pseudoklasy :placeholder-shown, gdy w danym momencie dany element HTML posiada treść wygenerowaną na podstawie wartości swojego atrybutu placeholder.

Informacje techniczne o selektorze `:placeholder-shown`

ograniczenie - elementy HTML

element input
element textarea

ograniczenie - właściwości CSS

brak

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

input:placeholder-shown {
  background-color:red;
}

Wyjaśnienie przykładowej reguły CSS

input:placeholder-shown { background-color:red; }

input:placeholder-shown

do każdego elementu input, który posiada treść wygenerowaną na podstawie wartości swojego atrybutu placeholder

background-color

dodaj właściwość CSS, która zmieni kolor tła elementu HTML

red

na barwę czerwoną

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

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

    <style>
      input:placeholder-shown {
        background-color:red;
      }

      /* Dla przeglądarki internetowej Internet Explorer */
      input:-ms-input-placeholder {
        background-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>