InternetExplorerでinputにつく×は::-ms-clearでスタイル適用

InternetExplorer10以上で、１行テキストボックスのinput type=”text”へ文字を入力する表示されるようになった×ボタン。

これを押すと、入力されている内容をクリアできるのですが
お客さんから、違和感があるから消してほしいと要望があったり
テキストボックスの枠を大きめにすると、×が大きく表示されすぎて目立ちすぎたりと
初期設定のままでは何かと使いにくい場面の多い機能です。

このクリアボタンは、::-ms-clearの擬似要素でcss制御できます。

※InternetExplorer10以上でご覧ください。

wordpressのスタイルのみ

inputの高さをあげたので×が大きすぎ

×ボタンのスタイルもカスタマイズ

試してみたところ。:hoverも組み合わせられました。

<br />
&lt;div class=&quot;sample&quot;&gt;<br />
	&lt;input type=&quot;text&quot;&gt;<br />
&lt;/div&gt;<br />
&lt;div class=&quot;sample&quot;&gt;<br />
	&lt;input type=&quot;text&quot; class=&quot;custom&quot;&gt;<br />
&lt;/div&gt;<br />
&lt;div class=&quot;sample&quot;&gt;<br />
	&lt;input type=&quot;text&quot; class=&quot;custom clear-button&quot;&gt;<br />
&lt;/div&gt;<br />

<br />
.sample input {<br />
	margin-bottom: 18px;<br />
}</p>
<p>.sample .custom {<br />
	height: 36px;<br />
	padding: 0 12px;<br />
	font-size: 16px;<br />
	color: #666;<br />
	border: 1px solid #ccc;<br />
}</p>
<p>.sample .clear-button::-ms-clear {<br />
	margin-right: -6px;<br />
	height: 24px;<br />
	color: #ccc;<br />
}<br />
.sample .clear-button::-ms-clear:hover {<br />
	color: #fff;<br />
	background: #999;<br />
	border-radius: 24px;<br />
}<br />

今回ご紹介した×ボタンの他
おなじくIE10以上でinput type=”password”の右端に表示される目玉ボタンも
::-ms-revealで同様にスタイルを適用できます。

参考：
::-ms-clear pseudo-element (Windows)
::-ms-reveal pseudo-element (Windows)