diff options
Diffstat (limited to 'files/ja/archive/web/css/_doublecolon_-ms-clear/index.html')
| -rw-r--r-- | files/ja/archive/web/css/_doublecolon_-ms-clear/index.html | 137 |
1 files changed, 137 insertions, 0 deletions
diff --git a/files/ja/archive/web/css/_doublecolon_-ms-clear/index.html b/files/ja/archive/web/css/_doublecolon_-ms-clear/index.html new file mode 100644 index 0000000000..6c409b542c --- /dev/null +++ b/files/ja/archive/web/css/_doublecolon_-ms-clear/index.html @@ -0,0 +1,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> |