IEでinput textに表示される削除アイコンを非表示にする

inputの入力削除をjsで実装した際、IEで表示される削除アイコンを非表示にして挙動を合わせたいということがあったので、非表示にする方法をメモ。

サンプルコード

.customというクラスを付けて試してみます。

<input type="text" value="text" class="custom">

-ms-clearに対して非表示の設定を行います。

.custom::-ms-clear {
  visibility: hidden;
}

これで削除アイコンを非表示にできました。
削除アイコン非表示のデモページ

今回試していて気がついたのですが、typeがpasswordの場合はパスワードの一時表示ができるアイコンが表示されるようです。
上記デモでも試していますが、このパスワード一時表示のアイコンも非表示に設定できます。

<input type="password" class="custom">

-ms-revealに対して非表示の設定を行います。

.custom::-ms-reveal {
  visibility: hidden;
}

パスワード一時表示のアイコン非表示のデモページ