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

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

ie-input-text-clear-button

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

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

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

wordpressのスタイルのみ
inputの高さをあげたので×が大きすぎ
×ボタンのスタイルもカスタマイズ

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

<div class="sample">
	<input type="text">
</div>
<div class="sample">
	<input type="text" class="custom">
</div>
<div class="sample">
	<input type="text" class="custom clear-button">
</div>

.sample input {
	margin-bottom: 18px;
}

.sample .custom {
	height: 36px;
	padding: 0 12px;
	font-size: 16px;
	color: #666;
	border: 1px solid #ccc;
}

.sample .clear-button::-ms-clear {
	margin-right: -6px;
	height: 24px;
	color: #ccc;
}
.sample .clear-button::-ms-clear:hover {
	color: #fff;
	background: #999;
	border-radius: 24px;
}

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

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

関連記事

Pocket
Share on Tumblr