Ostatnio edytowany:

::placeholder

Autor: Virtual Patriot

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.

Dodatkowe techniczne informacje o selektorze ::placeholder

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

      /* Dla przeglądarki internetowej Internet Explorer */
      input:-ms-input-placeholder {
        color:red;
      }

      /* Dla przeglądarki internetowej Edge */
      input::-ms-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


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

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak, lecz z przedrostkiem -ms- oraz od wersji 10

Interpretuje tylko zapis alternatywny ":-ms-input-placeholder".

Edge

tak, lecz z przedrostkiem -ms-

Interpretuje tylko zapis alternatywny "::-ms-input-placeholder".

Zobacz więcej informacji o interpretacji selektora .