検索ボックスのカスタマイズについて

PR 2018/2/10

このトピックには4件の返信、2人の参加者があり、最後にryuにより8年、 6ヶ月前に更新されました。

4件の返信スレッドを表示中

投稿者

投稿
- 2018年2月8日 7:01 PM #58631
  
  ryu
  ゲスト
  
  いつもお世話になっております。
  
  検索窓にフォーカスすると、
  枠線が紫？水色？になります。
  
  これはsimplicity2の標準機能ですか？
  
  この枠線の色が変わらないようにするには
  どうすれば良いでしょうか。
  
  別の場所をクリックしてフォーカスを解除すると、
  一瞬ピンク色の枠線が見えます。
  
  これも消したいと思っています。
  
  どうぞよろしくお願いいたします。
- 2018年2月8日 10:55 PM #58635
  わいひら
  キーマスター
  子テーマのstyle.cssでここら辺のCSSを変更すればよいのではないかと思います。
```
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="search"]:focus, input[type="url"]:focus, input[type="tel"]:focus, textarea:focus {
    background: #fff none repeat scroll 0 0;
    border: 1px solid #ff69b4;
    box-shadow: 0 0 3px rgb(255, 105, 180);
    color: #444;
}
```
  ただ、僕は紫や水色にはならないので、上記の変更でうまくいかない場合は、実際のページのURLと使用しているブラウザも書いていただけると助かります。
- 2018年2月9日 9:41 AM #58640
  
  ryu
  ゲスト
  
  ご返信ありがとうございます。
  URLは以下の通りです。
  https://office-bridge26.com/
  
  ブラウザはchromeです。
  
  edgeで試したところ、紫色はなくなりましたが、
  ピンク色は出てしまうようです。
  （おそらくこのピンクはcssで調整可能です。）
  
  お手数おかけしますが、どうぞよろしくお願いいたします。
- 2018年2月9日 5:01 PM #58642
  かうたっく
  ゲスト
  ブラウザのスタイルでoutlineで青っぽい色が付いてるようです。
  
  Chromeのフォーカスした時のスタイル
  http://netakiri.net/uploader/src/up0386.png
```
input[type="text"]:focus {
	border: 1px solid #ccc;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
	outline: none;
}
```
  サイト内検索ってか、input[type=”text”]がフォーカスしても変わらないと思われます。
  
  .widget input[type="text"]:focusとしたら、ウィジェットに入ってるinput[type=”text”]、しかもChromeでは色は付かないかもです。
- 2018年2月9日 7:43 PM #58643
  
  ryu
  ゲスト
  
  いつもありがとうございます。
  改善されました！
  
  お手数おかけしました。
投稿者

投稿

4件の返信スレッドを表示中

トピック「検索ボックスのカスタマイズについて」には新しい返信をつけることはできません。