inputフォーム内のクリアボタンについて

2017-10-20

テキストフィールドに何か入力したときに現れる”x”ボタン(クリアボタン)について。
 

 
今までIEだけかと思って下記のCSSで削除していた。

input::-ms-clear {
    visibility:hidden;
}

 
しかし、ユーザーから搭載してほしいという要望があったため、他のブラウザでも表示できるかどうか調べてみた。
 

どうやらChromeやSafariでは通常はついているらしい。だが、自分の作ったものには表示されない。何故だと思い調べたところ、Normarize.cssに下記の記述があるため、Chrome等のWebkit系ブラウザではクリアボタンが消えていることがわかった。

/**
* Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
*/

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

 

よって、Normalize.cssを使用していて、クリアボタンを出したい場合は下記のようにする必要あり。input要素もtext属性ではなく、search属性を使用する。

<input type="search">

 

input[type="search"] {
  -webkit-appearance: searchfield;
}
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: searchfield-cancel-button;
}

 
上記を記述することで、IE10以降、Edge、Chrome、Safari(Macを持っていないため未確認)で対応できることがわかったが、Firefoxはこれでは対応できない。

 
各ブラウザで統一したやり方として、jQueryを利用する方法もある。
1. Add Clear – jQuery Plugin – Demo
2. Text Input with Clear Button – JSFiddle

1.を組み込もうと試してみると、私が導入しようとしている環境ではなぜかxマークの位置がずれる。まぁ他のCSS記述が邪魔しているだけだとは思うが。2.は試していないが、探せば他の記述例も見つかると思われる。

ちょっとした機能だが、マルチブラウザ対応させようと思うとどんどん複雑になっていくのが何とも。。