Ostatnio edytowany:

:placeholder-shown

Autor: Virtual Patriot

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.

Dodatkowe techniczne informacje o selektorze :placeholder-shown

ograniczenie - elementy HTML
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;
      }
    </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


Czerwony kolor tła ma tylko ten element "input", który posiada treść wygenerowaną na podstawie wartości swojego atrybutu "placeholder".

Interpretacja selektora :placeholder-shown

Firefox

nie

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

nie

Edge

nie

Zobacz więcej informacji o interpretacji selektora .