Read-only-pseudoluokka

Pseudoluokka read-only asettaa tyylin input-kentille, joilla on readonly-attribuutti. Tällainen input-kenttä on tarkoitettu vain lukemista varten, eli siihen ei voi syöttää tai muuttaa tietoja, mutta tiedot voidaan valita ja kopioida.

Syntaksi

cssvalitsija:read-only {
  
}

Esimerkki

Asetetaan vaaleanharmaat reunukset vain lukemista varten tarkoitetulle input-kentälle:

html<p>
  <label>Syötä teksti</label>
  <input type="text">
</p>
<p>
  <label>Lue teksti</label>
  <input type="text" value="text" readonly>
</p>
cssinput:read-only {
  border: 1px solid #D8DFE8;
}

Результат:

Katso myös

  • pseudoluokka :read-write,
    joka asettaa tyylin muokattavissa oleville input-kentille
  • pseudoluokka :default,
    joka asettaa tyylin oletusarvoisille elementeille
  • pseudoluokka :indeterminate,
    joka asettaa tyylin kytkimille, jotka ovat määrittämättömässä tilassa
  • pseudoluokka :optional,
    joka asettaa tyylin input-kentälle, jolla ei ole required-attribuuttia
  • pseudoluokka :placeholder-shown,
    joka asettaa tyylin elementeille, kun vihjeteksti näytetään
  • pseudoluokka :required,
    joka asettaa tyylin input-kentälle, jolla on asetettu required-attribuutti
  • pseudoluokka :focus-within,
    joka asettaa tyylin tarkennettuna oleville elementeille
  • ominaisuus caret-color,
    joka asettaa värin tekstikursorille input-kentässä