InternetExplorer10以上で、１行テキストボックスのinput type=”text”へ文字を入力する表示されるようになった×ボタン。
これを押すと、入力されている内容をクリアできるのですが
お客さんから、違和感があるから消してほしいと要望があったり
テキストボックスの枠を大きめにすると、×が大きく表示されすぎて目立ちすぎたりと
初期設定のままでは何かと使いにくい場面の多い機能です。
このクリアボタンは、::-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)
