CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSの:read-writeセレクターでreadonly属性のないinput要素にスタイルを適用する方法

CSSの:read-writeセレクターを使用すると、「readonly」属性が設定されていない、つまりユーザーが編集可能な要素を選択できます。フォームの入力欄のうち、編集できる項目だけを目立たせたい場合などに便利な擬似クラスです。

:read-writeセレクターとは

:read-writeは、<input>や<textarea>などの編集可能な要素に一致するCSSの擬似クラスです。逆に、readonly属性が付いた読み取り専用の要素は選択対象から除外されます。なお、フォーム部品以外でもcontenteditable属性が有効な要素は「読み書き可能」とみなされます。

実装例

以下のコードでは、input:read-writeに対して背景色を青、文字色を白に設定しています。readonly属性の有無によって表示がどう変わるか確認してみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
input:read-write {
background-color: blue;
color: white;
}
</style>
</head>
<body>
<form>
Subject: <input type="text" name="subject" value="Java"><br>
Student: <input type="text" name="student" readonly value="Amit"><br>
</form>
</body>
</html>

コードのポイント

  • Subjectフィールド：readonly属性がないため:read-writeセレクターに一致し、青い背景に白い文字で表示されます。
  • Studentフィールド：readonly属性が設定されているため、スタイルは適用されず通常の外観のままになります。

補足：:read-onlyセレクターとの使い分け

反対に、readonly属性が設定された読み取り専用の要素だけを選択したい場合は、:read-onlyセレクターを使用します。両者を組み合わせることで、編集可否に応じて入力欄の見た目を直感的に切り替えられ、ユーザーにとって分かりやすいフォームUIを作成できます。

  1. CSSでhr要素（水平線）のスタイルを設定する方法をわかりやすく解説

    CSSを使ってhr要素（水平線）のスタイルを設定するには、borderプロパティを活用します。hr要素はデフォルトではシンプルな1本の線として表示されますが、border-topやborder-radiusなどを組み合わせることで、実線・破線・二重線・点線・角丸など、さまざまなデザインに自由にカスタマイズできます。以下に、代表的な5種類の水平線スタイルを実装したサンプルコードを紹介します。サンプルコード<!DOCTYPE html> <html> <meta name="viewport" content="width=device-

  2. CSSでラベルのスタイルを設定する方法｜色分けラベルの作り方

    CSSを使用すれば、<span>タグにクラスを割り当てるだけで、色分けされた見やすいラベル（バッジ）を簡単に作成できます。ステータスやカテゴリの表示に役立つため、Webアプリケーションや管理画面などでよく使われるテクニックです。 サンプルコード 以下は、CSSでラベルのスタイルを設定する具体的なコード例です。 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"