CSS приклад: Псевдокласс :read-only

Псевдоклас :read-only у CSS

Псевдоклас :read-only використовується на полях форми з атрибутом readonly, які не можуть бути змінені або отримати фокус.

Синтаксис

input:read-only { ... }

Значення

Немає.

Приклад

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>:read-only</title>
  <style>
   input:read-only {
    opacity: 0.3; /* Полупрозрачність */
   }
  </style>
 </head>
 <body>
  <form>
    <p><input type="text" name="comment" size="40" 
       value="Введений текст не може змінюватися" readonly></p>
    <p><input type="submit" value="Відправити"></p>
  </form>
 </body>
</html>

Часті запитання

  • Q: Як використовувати псевдоклас :read-only в CSS?

    A: Псевдоклас :read-only використовується для стилізації елементів форми, які є доступні для читання, але не для редагування.

  • Q: Де можна застосовувати псевдоклас :read-only в CSS?

    A: Псевдоклас :read-only можна використовувати для стилізації input, textarea та інших елементів форм, які не можна редагувати.

  • Q: Як виглядає синтаксис псевдокласу :read-only в CSS?

    A: Синтаксис для псевдокласу :read-only виглядає так: input:read-only { стилі }.

  • Q: Які інші псевдокласи можна комбінувати з :read-only в CSS?

    A: Псевдоклас :read-only можна комбінувати з іншими псевдокласами, наприклад :invalid або :valid для стилізації форми з помилками або без них.

  • Q: Чи підтримують всі браузери псевдоклас :read-only в CSS?

    A: Більшість сучасних браузерів підтримують псевдоклас :read-only, але можуть бути проблеми зі сумісністю у деяких старих браузерах.