IE10 以降で表示されるようになったテキストボックスの×ボタンとパスワードの目ボタンを非表示にする CSS

IE10 以降、テキストボックスに×ボタンが表示されるようになった。これを押すと入力済の文章を全消しできる。どうもテキストボックスの幅が 90px 程度ないときは表示されないようだ。

同様に、パスワード入力欄にも目のマークが表示されるようになり、これを押すと入力中のパスワード文字列を見ることができる。

いずれも便利機能ではあるが、金額を入力させるために右揃えにしているテキストボックスでも×マークが右端に表示され、入力中に鬱陶しかったりする。

この×マークや目のマークは、以下のような CSS で非表示にできる。

/* テキストボックスの×マーク */
::-ms-clear  { visibility:hidden; }

/* パスワード欄の目のマーク */
::-ms-reveal { visibility:hidden; }

両方とも :-ms- で始まる IE 専用の擬似要素としてスタイリングができる。擬似要素のコロン : は1つでも2つでも動く。1つなのは CSS2、2つなのは CSS3 の決まりみたい。

ただし、一つ注意。互換表示モードやエンタープライズモードなどで、CSS の擬似要素を解釈できない旧バージョンに落として表示しているページだと、非表示にすることができない。

大抵こういうのを消したくなるのって、互換表示モードで難を凌いでるレガシーな社内向け Web アプリだったりするのだが、手軽に適用できるこの方法は互換表示モードだとダメということだ。

他のやり方はというと、この機能レガシーな環境に慣れていた人からは相当評判が悪かったのか、いくつかのやり方が提供されるようになっていた。

詳細は以下のサイトを参照。