Ostatnio edytowany:

:read-only

Autor: Virtual Patriot

Przeznaczenie selektora :read-only

      :read-only { ... }
    

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

Cechy elementu HTML spełniają zasadę pseudoklasy :read-only, gdy w danym momencie do danego elementu HTML nie możemy wprowadzić własnego tekstu.

Dodatkowe techniczne informacje o selektorze :read-only

ograniczenie - elementy HTML

brak

ograniczenie - właściwości CSS

brak

Przykładowa reguła CSS, selektor :read-only

p:read-only {
  color:red;
}

Wyjaśnienie przykładowej reguły CSS

      p:read-only { color:red; }
    
p:read-only

Do każdego elementu p, do którego nie możemy wprowadzić własnego tekstu

color

dodaj właściwość CSS, która zmieni kolor tekstu 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>
      p:read-only {
        color:red;
      }

      /* Dla przeglądarki internetowej Firefox */
      p:-moz-read-only {
        color:red;
      }
    </style>
  </head>

  <body>

    <p>
      tekst znajdujący się w zawartości tego elementu "p" jest koloru czerwonego, ponieważ do tego elementu "p" nie możemy wprowadzić własnego tekstu
    </p>

    <p contenteditable>
      tekst znajdujący się w zawartości tego elementu "p" nie jest koloru czerwonego, ponieważ do tego elementu "p" możemy wprowadzić własny tekst
    </p>

    <p>
      tekst znajdujący się w zawartości tego elementu "p" jest koloru czerwonego, ponieważ do tego elementu "p" nie możemy wprowadzić własnego tekstu
    </p>

  </body>
</html>

Rezultat

tekst znajdujący się w zawartości tego elementu "p" jest koloru czerwonego, ponieważ do tego elementu "p" nie możemy wprowadzić własnego tekstu

tekst znajdujący się w zawartości tego elementu "p" nie jest koloru czerwonego, ponieważ do tego elementu "p" możemy wprowadzić własny tekst

tekst znajdujący się w zawartości tego elementu "p" jest koloru czerwonego, ponieważ do tego elementu "p" nie możemy wprowadzić własnego tekstu

Interpretacja selektora :read-only

Firefox

tak, lecz z przedrostkiem -moz-

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

nie

Edge

tak