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

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 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
基本対応
非標準
Chrome 未対応 なしEdge 完全対応 あり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 未対応 なしEdge Mobile 完全対応 ありFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android ?

凡例

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

ドキュメントのタグと貢献者

このページの貢献者: mdnwebdocs-bot, mfuji09
最終更新者: mdnwebdocs-bot,