blob: b7fbf6bc248f0a399be789e08d885e3654446bdd (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
|
---
title: ':read-write'
slug: Web/CSS/:read-write
tags:
- CSS
- レイアウト
- 擬似クラス
- リファレンス
- セレクター
- ウェブ
- read-write
browser-compat: css.selectors.read-write
translation_of: Web/CSS/:read-write
---
{{CSSRef}}
**`:read-write`** は [CSS](/ja/docs/Web/CSS) の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で、ユーザーが編集できる要素 (`input` や `textarea` など) を表します。
```css
input:read-write, textarea:read-write {
background-color: #bbf;
}
p:read-write {
background-color: #bbf;
}
```
## 構文
{{csssyntax}}
## 例
### 読み取り専用/読み書きコントロールによるフォーム情報の確認
`readonly` のフォームコントロールの使用方法の一つは、ユーザーが以前のフォームに入力した情報 (例えば、配送方法の詳細など) をチェックして確認しながら、フォームの残りの部分と一緒に情報を送信することができるようにすることです。以下の例では、これを実現しています。
`:read-only` 擬似クラスは、入力欄をクリック可能なフィールドのように見せるスタイル付けをすべて削除するために使用されており、読み取り専用の段落のように見えます。一方、 `:read-write` 擬似クラスは、編集可能な `<textarea>` により良いスタイル付けを行うために使用されています。
```css
input:-moz-read-only, textarea:-moz-read-only,
input:read-only, textarea:read-only {
border: 0;
box-shadow: none;
background-color: white;
}
textarea:-moz-read-write,
textarea:read-write {
box-shadow: inset 1px 1px 3px #ccc;
border-radius: 5px;
}
```
完全なソースコードは [readonly-confirmation.html](https://github.com/mdn/learning-area/blob/master/html/forms/pseudo-classes/readonly-confirmation.html) にあります。以下のように表示されます。
{{EmbedGHLiveSample("learning-area/html/forms/pseudo-classes/readonly-confirmation.html", '100%', 660)}}
### フォーム以外の読み書き用コントロールのスタイル付け
このセレクターは {{htmlElement("input")}}/{{htmlElement("textarea")}} 要素に {{htmlattrxref("readonly", "input")}} が設定されているものだけを選択するのではありません。ユーザーが編集できる*あらゆる*要素、例えば {{htmlelement("p")}} 要素に {{htmlattrxref("contenteditable")}} が設定されたものを選択します。
```html
<p contenteditable>この段落は編集可能です。読み書き可です。</p>
<p>この段落は編集できません。読み取り専用です。</p>
```
```css
p {
font-size: 150%;
padding: 5px;
border-radius: 5px;
}
p:read-only {
background-color: red;
color: white;
}
p:read-write {
background-color: lime;
}
```
{{EmbedLiveSample('Styling_read-write_non-form_controls', '100%', 400)}}
## 仕様書
{{Specifications}}
## ブラウザーの互換性
{{Compat}}
## 関連情報
- {{cssxref(":read-only")}}
- HTML の {{htmlattrxref("contenteditable")}} 属性
|
