::-ms-clear

非標準
この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

CSS の ::-ms-clear 擬似要素は、 <input type="text"> テキストコントロールにの端に、現在の値をクリアするクリアボタンを生成します。この擬似要素は標準外であり、 Internet Explorer 10, Internet Explorer 11, Microsoft Edge のみが対応しています。

クリアボタンはフォーカスを与えられた、空ではないテキストコントロールにのみ表示されます。これにはテキスト風、または type="text" へフォールバックされるものも含みます。そのような入力欄には次のようなものがあります。

許容されるプロパティ

以下の CSS プロパティのみが ::-ms-clear がセレクターにある場合に利用できます。その他のプロパティは無視されます。

構文

::-ms-clear

HTML

<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>

CSS

input,
label {
  display: block;
}

input[type=text]::-ms-clear {
  color: red; /* ×印の色を赤に設定します。 */
  /* display 属性を "none" に設定することで、×印を非表示にすることができます。 */
}

結果

以下のスクリーンショットは、この機能がどのように見えるかを示しています。

仕様書

どの仕様書にも掲載されていません。

ブラウザーの互換性

過去には Internet Explorer と Edge のバージョン79より前で対応していました。