<input type="search">の入力値を削除する☓ボタンのデザインをCSS3で変更する

2015-08-20

ChromeやSafariで検索フォームの右側にある☓ボタンを押すと、入力した文字を削除することができますが、このボタンをCSS3で変更する方法を紹介します。

この図のような☓ボタンは一発で入力値を消してくれるのでありがたい反面、自分のデザインや動作を設定したいときに、どうやって変更したら良いか知らないと悩みます。

知ってしまえば簡単ですが、CSS3でアクセスできる属性があります。

::-webkit-search-cancel-button {
   -webkit-appearance: none;
}

このボタンは単純な擬似エレメントでSafariやChromeなどのWebkit系限定のようですが、ボタンを無くしたい場合には、上記のように -webkit-appearance: none; を設定して標準の見た目を削除します。

位置を変更したい場合には、以下のように変更も可能です。

::-webkit-search-cancel-button {
   position: absolute;
   left: 0;
}

デモ

実際に何か文字を入れて確認してみてください。

デモのコード

<style>
:focus {
   outline: none;
}
*:focus::-webkit-input-placeholder{
   color: transparent;
}
#search-cancel-test{
   display: table;
   border: 1px solid #000;
   padding: 1em;
}
#search-cancel-test label {
   display: table-row;
   line-height: 3em;
}
#search-cancel-test input, #search-cancel-test span {
   display: table-cell;
}
input {
   position: relative;
   border: 1px solid #999;
   border-radius: 2em;
   padding: .5em;
   font-size: 1em;
}

#test2::-webkit-search-cancel-button {
   -webkit-appearance: none;
}
#test3 {
   padding-left: 2em;
}
#test3::-webkit-search-cancel-button {
   position: absolute;
   left: 1em;
}
</style>

<div id="search-cancel-test">
   <label><span>標準</span><input type="search" id="test1"></label>
   <label><span>☓ボタンなし</span><input type="search" id="test2"></label>
   <label><span>左寄せ</span><input type="search" id="test3"></label>
</div>

これでデザインの幅が広がったというか、細かいところまで気にすんなと考えるかは難しいところですが・・・