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

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

参考サイト

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2021年6月
 12345
6789101112
13141516171819
20212223242526
27282930