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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
|
---
title: ':read-only'
slug: 'Web/CSS/:read-only'
tags:
- CSS
- Layout
- Pseudo-class
- Reference
- Web
- セレクター
- 疑似クラス
translation_of: 'Web/CSS/:read-only'
---
<div>{{CSSRef}}</div>
<p><strong><code>:read-only</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/CSS/Pseudo-classes" title="Pseudo-classes">擬似クラス</a>で、ユーザーが編集できない要素 (<code>input</code> や <code>textarea</code> など) を表します。</p>
<pre class="brush: css no-line-numbers notranslate">input:read-only, textarea:read-only {
background-color: #ccc;
}
p:read-only {
background-color: #ccc;
}
</pre>
<h2 id="Syntax" name="Syntax">構文</h2>
{{csssyntax}}
<h2 id="Example" name="Example">例</h2>
<h3 id="Confirming_form_information_in_read-onlyread-write_controls" name="Confirming_form_information_in_read-onlyread-write_controls">読み取り専用/読み書きコントロールによるフォーム情報の確認</h3>
<p><code>readonly</code> のフォームコントロールの使用方法の一つは、ユーザーが以前のフォームに入力した情報 (例えば、配送方法の詳細など) をチェックして確認しながら、フォームの残りの部分と一緒に情報を送信することができるようにすることです。以下の例では、これを実現しています。</p>
<p><code>:read-only</code> 擬似クラスは、入力欄をクリック可能なフィールドのように見せるスタイル付けをすべて削除するために使用されており、読み取り専用の段落のように見えます。一方、 <code>:read-write</code> 擬似クラスは、編集可能な <code><textarea></code> により良いスタイル付けを行うために使用されています。</p>
<pre class="brush: css notranslate">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;
}</pre>
<p>完全なソースコードは <a class="external external-icon" href="https://github.com/mdn/learning-area/blob/master/html/forms/pseudo-classes/readonly-confirmation.html" rel="noopener">readonly-confirmation.html</a> にあります。以下のように表示されます。</p>
<p>{{EmbedGHLiveSample("learning-area/html/forms/pseudo-classes/readonly-confirmation.html", '100%', 660)}}</p>
<h3 id="Styling_read-only_non-form_controls" name="Styling_read-only_non-form_controls">フォーム以外の読み取り専用コントロールのスタイル付け</h3>
<p>このセレクターは {{htmlElement("input")}}/{{htmlElement("textarea")}} 要素に {{htmlattrxref("readonly", "input")}} が設定されているものだけを選択するのではありません。ユーザーが編集できない<em>あらゆる</em>要素を選択します。</p>
<pre class="brush: html notranslate"><p contenteditable>この段落は編集可能です。読み書き可です。</p>
<p>この段落は編集できません。読み取り専用です。</p></pre>
<pre class="brush: css notranslate">p {
font-size: 150%;
padding: 5px;
border-radius: 5px;
}
p:read-only {
background-color: red;
color: white;
}
p:read-write {
background-color: lime;
}</pre>
<p>{{EmbedLiveSample('Styling_read-only_non-form_controls', '100%', 400)}}</p>
<h2 id="Specifications" name="Specifications">仕様書</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">仕様書</th>
<th scope="col">状態</th>
<th scope="col">備考</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ SpecName('HTML WHATWG', '#selector-read-only', ':read-only') }}</td>
<td>{{ Spec2('HTML WHATWG') }}</td>
<td>変更なし</td>
</tr>
<tr>
<td>{{ SpecName('HTML5 W3C', '#selector-read-only', ':read-only') }}</td>
<td>{{ Spec2('HTML5 W3C') }}</td>
<td>HTML および制約検証に関する意味を定義。</td>
</tr>
<tr>
<td>{{ SpecName('CSS4 Selectors', '#rw-pseudos', ':read-only') }}</td>
<td>{{ Spec2('CSS4 Selectors') }}</td>
<td>擬似クラスを定義、但し意味の結びつけの定義はなし</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
<p>{{Compat("css.selectors.read-only")}}</p>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li>{{cssxref(":read-write")}}</li>
<li>HTML の {{htmlattrxref("contenteditable")}} 属性</li>
</ul>
|
