検索フォームの入力欄内の右端にクリアボ...
 
通知
すべてクリア

検索フォームの入力欄内の右端にクリアボタン(×ボタン)を設置したい


m.j
 m.j
(@m-j)
Active Member
結合: 3か月前
投稿: 8
Topic starter  

検索フォームの入力欄内の右端に、入力した内容を消せるクリアボタン(×ボタン)を設置したいです。
YahooやGoogleの検索フォームにあるものです。

実施できる方法はございますでしょうか?
もしあれば、ご教授いただければ幸いです。


引用
Xeory制作チーム
(@xeory_production_team)
メンバー Admin
結合: 3年前
投稿: 30
 

この度はお問合せありがとうございます。

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;
}

よろしくお願いします。


返信引用
m.j
 m.j
(@m-j)
Active Member
結合: 3か月前
投稿: 8
Topic starter  

ご回答ありがとうございました。

実施してみましたが、 ☓ボタンは作成できませんでした。

以下、実際に行った手順です。

 

・lib/functions/setting.php 中のtype="text"をtype="search"に変更
 ご提示いただいたコードを、該当箇所の237行目に行ごと置き換えるパターンと、「type="text"」という部分のみ「type="search"」に置換するパターン、どちらも試しました。

・cssファイル追記
 ご指定いただいたコードを、「style.css」に追記パターンと、テーマ>カスタマイズ>「追加CSS」」に追記のどちらも試しました。

 

何か分かれば、ご教授いただければ幸いです。


返信引用
Xeory制作チーム
(@xeory_production_team)
メンバー Admin
結合: 3年前
投稿: 30
 

@m-j 

検索フォームでスタイルが有効になっているか確認してみてください。

chromeの検証モードでスタイルのご確認が可能です。

よろしくお願いいたします。


返信引用
m.j
 m.j
(@m-j)
Active Member
結合: 3か月前
投稿: 8
Topic starter  

ご回答いただきありがとうございます。
特定の条件では、☓ボタンが表示され正常に動作しました。
以下が実施したことと、動作する条件です。

実施手順:
・setting.php の指定の行を変更
・テーマ>カスタマイズ>「追加CSS」」に、指定のコードを追記

正常動作する条件:
・パソコンからの閲覧のみ
 →スマホでは☓ボタンが表示されませんでした。
・ブラウザの画面表示幅を狭くしている時のみ
 →画面表示を広くして、検索窓の位置がサイトの下部から右部に移動すると、☓ボタンが表示されなくなります。

改善方法が分かれば、ご教授いただければ幸いです。

This post was modified 4週間前 by m.j

返信引用
Xeory制作チーム
(@xeory_production_team)
メンバー Admin
結合: 3年前
投稿: 30
 

特定の条件では、☓ボタンが表示される事から、他のスタイルが干渉している可能性がございます。

・cssファイルの他のカスタマイズ箇所を元に戻す

・プラグインをOFFにする

などお試しいただければと思います。

 


返信引用
m.j
 m.j
(@m-j)
Active Member
結合: 3か月前
投稿: 8
Topic starter  

全てのプラグインを無効にし、他のカスタマイズをしていない環境で試しましたが、

スマホでは☓ボタンが表示されませんでした。

 

もし他に改善方法が分かれば、ご教授いただければ幸いです。


返信引用
Xeory制作チーム
(@xeory_production_team)
メンバー Admin
結合: 3年前
投稿: 30
 

デモにUPしてみましたが、スマホでも表示されますね。

https://xeory.jp/base/

 

cssの書き方等に間違いが無いか、ご確認頂ければと思います。


返信引用
m.j
 m.j
(@m-j)
Active Member
結合: 3か月前
投稿: 8
Topic starter  

@xeory_production_team 

ご返信及びご確認ありがとうございます。

 

実施していただいたデモサイトにて、私のスマホ(iPhone)で、ブラウザも、Safari、Chromeと試しましたが、どちらも表示されませんでした。

 

何かスマホの設定が悪いのでしょうか?


返信引用
共有: