Autor publikacji: Virtual Patriot - Administrator

:placeholder-shown

Data publikacji: Styczeń 02 2017
Ostatnio edytowano: Grudzień 28 2024

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

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>Darmowy 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>