InternetExplorer10以上で、1行テキストボックスの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)