blob: dffb80bfbcddbc56c3178ee00c5b0f9ea1975416 (
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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
|
---
title: ':placeholder-shown'
slug: Web/CSS/:placeholder-shown
tags:
- ':placeholder-shown'
- CSS
- 擬似クラス
- リファレンス
- セレクター
browser-compat: css.selectors.placeholder-shown
translation_of: Web/CSS/:placeholder-shown
---
{{CSSRef}}
**`:placeholder-shown`** は [CSS](/ja/docs/Web/CSS) の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で、[プレイスホルダー文字列](/ja/docs/Web/HTML/Element/input#attr-placeholder)が表示されている {{HTMLElement("input")}} または {{HTMLElement("textarea")}} 要素を表します。
```css
/* プレイスホルダーが有効な要素を選択 */
:placeholder-shown {
border: 2px solid silver;
}
```
## 構文
{{CSSSyntax}}
## 例
### 基本的な例
この例は、プレイスホルダーが表示されているときに特殊なフォントと境界線を適用します。
#### HTML
```html
<input placeholder="何か入力してください！">
```
#### CSS
```css
input {
border: 1px solid black;
padding: 3px;
}
input:placeholder-shown {
border-color: teal;
color: purple;
font-style: italic;
}
```
#### 結果
{{EmbedLiveSample("Basic_example", 200, 80)}}
### 文字列があふれる場合
スマートフォンのような狭い画面では、検索ボックスやその他の入力欄の幅はとても狭くなります。これにより、プレイスホルダーの文字列が望ましくない形で切り取られることがあります。 {{cssxref("text-overflow")}} プロパティでこの挙動を修正すると便利です。
#### HTML
```html
<input id="input1" placeholder="Name, Rank, and Serial Number">
<br><br>
<input id="input2" placeholder="Name, Rank, and Serial Number">
```
#### CSS
```css
#input2:placeholder-shown {
text-overflow: ellipsis;
}
```
#### 結果
{{EmbedLiveSample("Overflowing_text", 200, 80)}}
### カスタマイズした入力欄
以下の例では部署名と ID コード欄をカスタムスタイルで強調します。
#### HTML
```html
<form id="test">
<p>
<label for="name">Enter Student Name:</label>
<input id="name" placeholder="Student Name"/>
</p>
<p>
<label for="branch">Enter Student Branch:</label>
<input id="branch" placeholder="Student Branch"/>
</p>
<p>
<label for="sid">Enter Student ID:</label>
<input type="number" pattern="[0-9]{8}" title="8 digit ID" id="sid" class="studentid" placeholder="8 digit id"/>
</p>
<input type="submit"/>
</form>
```
#### CSS
```css
input {
background-color: #E8E8E8;
color: black;
}
input.studentid:placeholder-shown {
background-color: yellow;
color: red;
font-style: italic;
}
```
#### 結果
{{EmbedLiveSample("Customized_input_field", 200, 180)}}
## 仕様書
{{Specifications}}
## ブラウザーの互換性
{{Compat}}
## 関連情報
- {{CSSxRef("::placeholder")}} 擬似要素はプレイスホルダー*自身*にスタイルを適用します。
- 関連する HTML 要素: {{HTMLElement("input")}}, {{HTMLElement("textarea")}}
- [HTML フォーム](/ja/docs/Learn/Forms)
|
