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
|
---
title: '::-ms-clear'
slug: 'Archive/Web/CSS/::-ms-clear'
tags:
- CSS
- 'CSS:Microsoft Extensions'
- Non-standard
- Pseudo-element
- Reference
- Selector
translation_of: 'Archive/Web/CSS/::-ms-clear'
---
<div>{{CSSRef}}{{Non-standard_Header}}</div>
<p>CSS の <strong><code>::-ms-clear</code></strong> <a href="/ja/docs/Web/CSS/Pseudo-elements">擬似要素</a>は、 {{HTMLElement("input/text", '<code style="white-space: nowrap;"><input type="text"></code>')}} テキストコントロールにの端に、現在の値をクリアするクリアボタンを生成します。この擬似要素は標準外であり、 Internet Explorer 10, Internet Explorer 11, Microsoft Edge のみが対応しています。</p>
<p>クリアボタンはフォーカスを与えられた、空ではないテキストコントロールにのみ表示されます。これにはテキスト風、または <code>type="text"</code> へフォールバックされるものも含みます。そのような入力欄には次のようなものがあります。</p>
<ul>
<li>{{HTMLElement("input/color", '<code><input type="color"></code>')}}</li>
<li>{{HTMLElement("input/date", '<code><input type="date"></code>')}}</li>
<li>{{HTMLElement("input/datetime", '<code><input type="datetime"></code>')}}</li>
<li>{{HTMLElement("input/datetime-local", '<code><input type="datetime-local"></code>')}}</li>
<li>{{HTMLElement("input/email", '<code><input type="email"></code>')}}</li>
<li>{{HTMLElement("input/month", '<code><input type="month"></code>')}}</li>
<li>{{HTMLElement("input/number", '<code><input type="number"></code>')}}</li>
<li>{{HTMLElement("input/search", '<code><input type="search"></code>')}}</li>
<li>{{HTMLElement("input/tel", '<code><input type="tel"></code>')}}</li>
<li>{{HTMLElement("input/time", '<code><input type="time"></code>')}}</li>
<li>{{HTMLElement("input/url", '<code><input type="url"></code>')}}</li>
<li>{{HTMLElement("input/week", '<code><input type="week"></code>')}}</li>
</ul>
<h2 id="Allowable_properties" name="Allowable_properties">許容されるプロパティ</h2>
<p>以下の CSS プロパティのみが <code>::-ms-clear</code> がセレクターにある場合に利用できます。その他のプロパティは無視されます。</p>
<div class="index">
<ul>
<li>{{CSSxRef("-ms-high-contrast-adjust")}}</li>
<li>{{CSSxRef("background-clip")}}</li>
<li>{{CSSxRef("background-color")}}</li>
<li>{{CSSxRef("background-image")}}</li>
<li>{{CSSxRef("background-origin")}}</li>
<li>{{CSSxRef("background-position-x")}}</li>
<li>{{CSSxRef("background-position-y")}}</li>
<li>{{CSSxRef("background-repeat")}}</li>
<li>{{CSSxRef("background-size")}}</li>
<li>{{CSSxRef("border-bottom-color")}}</li>
<li>{{CSSxRef("border-bottom-left-radius")}}</li>
<li>{{CSSxRef("border-bottom-right-radius")}}</li>
<li>{{CSSxRef("border-bottom-style")}}</li>
<li>{{CSSxRef("border-bottom-width")}}</li>
<li>{{CSSxRef("border-left-color")}}</li>
<li>{{CSSxRef("border-left-style")}}</li>
<li>{{CSSxRef("border-left-width")}}</li>
<li>{{CSSxRef("border-right-color")}}</li>
<li>{{CSSxRef("border-right-style ")}}</li>
<li>{{CSSxRef("border-right-width")}}</li>
<li>{{CSSxRef("border-top-color")}}</li>
<li>{{CSSxRef("border-top-left-radius")}}</li>
<li>{{CSSxRef("border-top-right-radius ")}}</li>
<li>{{CSSxRef("border-top-style")}}</li>
<li>{{CSSxRef("border-top-width")}}</li>
<li>{{CSSxRef("box-shadow")}}</li>
<li>{{CSSxRef("box-sizing")}}</li>
<li>{{CSSxRef("color")}}</li>
<li>{{CSSxRef("cursor")}}</li>
<li>{{CSSxRef("display")}} (<code>block</code>, <code>inline-block</code>, <code>none</code> の値)</li>
<li>{{CSSxRef("@font-face")}}</li>
<li>{{CSSxRef("font-size")}}</li>
<li>{{CSSxRef("font-style")}}</li>
<li>{{CSSxRef("font-weight")}}</li>
<li>{{CSSxRef("height")}}</li>
<li>{{CSSxRef("margin-bottom")}}</li>
<li>{{CSSxRef("margin-left")}}</li>
<li>{{CSSxRef("margin-right")}}</li>
<li>{{CSSxRef("margin-top")}}</li>
<li>{{CSSxRef("opacity")}}</li>
<li>{{CSSxRef("outline-color")}}</li>
<li>{{CSSxRef("outline-style")}}</li>
<li>{{CSSxRef("outline-width")}}</li>
<li>{{CSSxRef("padding-bottom")}}</li>
<li>{{CSSxRef("padding-left")}}</li>
<li>{{CSSxRef("padding-right")}}</li>
<li>{{CSSxRef("padding-top")}}</li>
<li>{{CSSxRef("transform")}}</li>
<li>{{CSSxRef("transform-origin")}}</li>
<li>{{CSSxRef("visibility")}}</li>
<li>{{CSSxRef("width")}}</li>
</ul>
</div>
<h2 id="Syntax" name="Syntax">構文</h2>
<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
<h2 id="Example" name="Example">例</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html; notranslate"><form>
<label for="firstname">First name:</label>
<input type="text" id="firstname" name="firstname" placeholder="First name">
<br>
<label for="lastname">Last name:</label>
<input type="text" id="lastname" name="lastname" placeholder="Second name">
</form>
</pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css; notranslate">input,
label {
display: block;
}
input[type=text]::-ms-clear {
color: red; /* ×印の色を赤に設定します。 */
/* display 属性を "none" に設定することで、×印を非表示にすることができます。 */
}</pre>
<h3 id="Result" name="Result">結果</h3>
<p>{{EmbedLiveSample('Example')}}</p>
<p>以下のスクリーンショットは、この機能がどのように見えるかを示しています。</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/12263/ms-clear-example.png" style="display: block; height: 75px; margin: 0px auto; width: 611px;"></p>
<h2 id="Specifications" name="Specifications">仕様書</h2>
<p>どの仕様書にも掲載されていません。</p>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
<p>過去には Internet Explorer と Edge のバージョン79より前で対応していました。</p>
|
