::-ms-clear

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

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

許容されるプロパティ

以下の 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" に設定することで、×印を非表示にすることができます。 */
}

結果

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

 

仕様書

何れの仕様書の一部でもありません。

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
::-ms-clear
非標準
Chrome 未対応 なしEdge 完全対応 12
補足
完全対応 12
補足
補足 In an <input type='text'> element styled with text-align: right, if the clear button is shown, it will clip off the right edge of the text value of the <input type='text'> element. A workaround is to hide the clear button using display: none.
Firefox 未対応 なしIE 完全対応 10
補足
完全対応 10
補足
補足 In an <input type='text'> element styled with text-align: right, if the clear button is shown, it will clip off the right edge of the text value of the <input type='text'> element. A workaround is to hide the clear button using display: none.
Opera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
非標準。ブラウザー間の互換性が低い可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。