検索フォームの入力欄内の右端に、入力した内容を消せるクリアボタン（×ボタン）を設置したいです。
YahooやGoogleの検索フォームにあるものです。
実施できる方法はございますでしょうか？
もしあれば、ご教授いただければ幸いです。
この度はお問合せありがとうございます。
lib>funtions>setting.php内に検索フォームに関する記述がございます。
その中のtype="text"をtype="search"に変更してください。
<input type="text" value="' . get_search_query() . '" name="s" id="s" aria-label="検索フォーム" />
<input type="search" value="' . get_search_query() . '" name="s" id="s" aria-label="検索フォーム" />
次にstyle.cssファイルに以下の記述を追加してください。
/* ☓ボタン有効化 */
input[type="search"] {
-webkit-appearance: auto;
}
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: auto;
}
/* 既存のinput[type=text]のスタイルをsearchに適用 */
#searchform input[type=search] {
line-height: 18px;
padding: 8px 13px;
font-size: 14px;
width: 100%;
box-sizing: border-box;
border: none;
float: left;
}
よろしくお願いします。
ご回答ありがとうございました。
実施してみましたが、 ☓ボタンは作成できませんでした。
以下、実際に行った手順です。
・lib/functions/setting.php 中のtype="text"をtype="search"に変更
ご提示いただいたコードを、該当箇所の237行目に行ごと置き換えるパターンと、「type="text"」という部分のみ「type="search"」に置換するパターン、どちらも試しました。
・cssファイル追記
ご指定いただいたコードを、「style.css」に追記パターンと、テーマ＞カスタマイズ＞「追加CSS」」に追記のどちらも試しました。
何か分かれば、ご教授いただければ幸いです。
ご回答いただきありがとうございます。
特定の条件では、☓ボタンが表示され正常に動作しました。
以下が実施したことと、動作する条件です。
実施手順：
・setting.php の指定の行を変更
・テーマ＞カスタマイズ＞「追加CSS」」に、指定のコードを追記
正常動作する条件：
・パソコンからの閲覧のみ
→スマホでは☓ボタンが表示されませんでした。
・ブラウザの画面表示幅を狭くしている時のみ
→画面表示を広くして、検索窓の位置がサイトの下部から右部に移動すると、☓ボタンが表示されなくなります。
改善方法が分かれば、ご教授いただければ幸いです。
特定の条件では、☓ボタンが表示される事から、他のスタイルが干渉している可能性がございます。
・cssファイルの他のカスタマイズ箇所を元に戻す
・プラグインをOFFにする
などお試しいただければと思います。
全てのプラグインを無効にし、他のカスタマイズをしていない環境で試しましたが、
スマホでは☓ボタンが表示されませんでした。
もし他に改善方法が分かれば、ご教授いただければ幸いです。
ご返信及びご確認ありがとうございます。
実施していただいたデモサイトにて、私のスマホ(iPhone)で、ブラウザも、Safari、Chromeと試しましたが、どちらも表示されませんでした。
何かスマホの設定が悪いのでしょうか？
