こんにちは。Internet Explorer サポートの 杉谷です。
Internet Explorer 10 以降、input type ="text" や "password" で指定されたボックス内に以下のようなボタンが表示されるようになりました。
・input type ="text" ：テキスト消去ボタン（クリアボタン）
・input type ="password"：パスワード表示ボタン（revealボタン）
この表示はCSSの擬似要素（HTML 上に明示的な定義をしなくても、ブラウザーにより提供される要素）により表示されています。
※IE10 から対応できる擬似要素の CSS 定義の一覧は以下のページにてご確認頂けます。
◇Pseudo-elements
http://msdn.microsoft.com/en-us/library/windows/apps/hh767361.aspx
本ブログでは以下にそれぞれのボタンを非表示にする方法をご紹介します。
■『クリアボタン』を非表示にする方法
=========================================================
以下のサンプルのように『-ms-clear』要素を指定します。
~~~~~~~~~~ sample.html ~~~~~~~~~~
<html>
<head>
<style type="text/css">
::-ms-clear {display: none;}
</style>
</head>
<body>
<input type="text">
</body>
</html>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
クリアボタンは、テキストボックスの幅を基準として、ドキュメントモードやフォント等によって閾値を設けて表示しています。このためテキストボックスの幅を小さくすることで非表示することも可能です。
但し、閾値の具体的な判断ロジック詳細は公開されていないため、各環境毎に検証等を頂く必要があります。
■『reveal ボタン』を非表示する方法
=========================================================
以下の2つの方法があります。
1.グループポリシーを構成する
2.『-ms-reveal』要素を指定する
1.【グループポリシーを構成する】
-------------------------------------------
以下のポリシーを"有効"に構成することで『reveal ボタン』を非表示にできます。
場所：[管理用テンプレート] > [Windows コンポーネント] > [Internet Explorer] > [セキュリティの機能]
項目：[パスワードを表示するボタンを非表示にする]
※本項目は、IE10 以降がインストールされた環境のポリシーテンプレートに存在します。
※Windows 10 環境では、IE11 でのみ本項目が有効です。（Microsoft Edge では 反映されません）
2.【『-ms-reveal』要素を指定する】
---------------------------------------------
以下のサンプルのように『-ms-reveal』要素を指定します。
~~~~~~~~~~ sample2.html ~~~~~~~~~~
<html>
<head>
<style type="text/css">
::-ms-reveal {display: none;}
</style>
</head>
<body>
<input type="password">
</body>
</html>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
=========================================================
『-ms-clear』『-ms-reveal』要素は、ドキュメントモードが IE10 標準以降で有効となります。
このためドキュメントモードが IE9 標準以前で表示されているコンテンツでは、各要素で表示を制御することができませんのでご注意ください。
※Microsoft Edge ではドキュメントモードの概念はありませんので各要素は有効です。
なお、Windows 10 + IE11 のエンタープライズ モード下では要素の有無に関わらず各ボタンが非表示となります。
以上です。
ご紹介した内容が皆さまお役に立ちましたら幸いです。