Chrome検索フォーム オートコンプリート使用時の背景色変更対応

[kyainuma]

概要

Resolves #202

やったこと

• Chrome検索フォームオートコンプリートを使用時の背景色変更対応

やっていないこと

確認方法

1. Chromeから http://localhost:3000/ に遷移し、検索フォームに履歴から入力してフォームの背景色が変わらないことを確認してください

チェック

• [x] rubocopをパスした
• [x] specをパスした
• [x] brakemanをパスした

コメント

• 参考資料
• tailwindの書き方に適していない気がします。。。

[aiandrox]

これ、Tailwindでクラスいい感じにしたらうまくいかんかな？ ということで、もし暇ならちょっと頑張ってほしい♡

[kyainuma]

@aiandrox 修正しました！ box shadowをつけて対応したのですが、既存のユーティリティだと効かなかったので、カスタマイズしたユーティリティを作ってそれを対象の要素につけました！

inputタグの:-webkit-autofill疑似要素に今回の修正cssつけようと思ったのですが、tailwindが:-webkit-autofillに対応してないっぽく、対応できなかったので上記の対応にしました。。。

https://tailwindcss.jp/docs/box-shadow

[aiandrox]

あ、ごめんなさい…… 背景色が青い部分がinputタグのエリアになるから、その範囲をいい感じにしたら背景色を書かなくてもいいんじゃないかなっていう意味でした🙇‍♂️ （今はformのエリアがborderになっている）

[kyainuma]

@aiandrox

背景色が青い部分がinputタグのエリアになるから、その範囲をいい感じにしたら背景色を書かなくてもいいんじゃないかなっていう意味でした🙇‍♂️

inputタグにbg-whiteつけるみたいな認識であってます？ これだと効かないんですよね。。。

<input class="w-full ml-1 outline-none **bg-white**" type="text" name="search[title]" id="search_title">

[aiandrox]

  = form_with model: @search_form, url: products_path, method: :get, scope: 'search', data: { turbo: false },
                   class: 'w-full flex justify-between items-center mx-auto', local: true do |f|
    = f.text_field :title, class: 'w-full ml-1 outline-none h-10 pl-3 pr-2 rounded-full border'
    = f.button content_tag(:i, '', class: 'fas fa-search text-gray-600 h-4 w-4 fill-current'), class: 'ml-1 outline-none focus:outline-none'

これに頑張って虫眼鏡をabsoluteするみたいな…… でも無理だったら今のPRのやつで大丈夫です！！

[kyainuma]

absoluteってposition:absolute;のことですかね？ あんまり自分が理解できてないっぽいですｗ

[aiandrox]

ですです！

[kyainuma]

虫眼鏡にposition: absolute;つけても背景色って関係なくないですか？ やりたいことが違うのかな。。。

= form_with model: @search_form, url: products_path, method: :get, scope: 'search', data: { turbo: false },
          class: 'w-full flex justify-between items-center mx-auto', local: true do |f|
    = f.text_field :title, class: 'w-full ml-1 outline-none h-10 pl-3 pr-2 rounded-full border'
    = f.button content_tag(:i, '', class: 'fas fa-search text-gray-600 h-4 w-4 fill-current absolute'), class: 'ml-1 outline-none focus:outline-none'

[aiandrox]

@kyainuma ごめんなさいrelativeだった。。

.w-5/12.mx-auto
  = form_with model: @search_form, url: products_path, method: :get, scope: 'search', data: { turbo: false },
          class: 'w-full flex justify-between items-center mx-auto', local: true do |f|
    = f.text_field :title, class: 'w-full pl-4 pr-8 outline-none h-10 rounded-full border'
    = f.button content_tag(:i, '', class: 'fas fa-search text-gray-600 h-4 w-4 fill-current relative right-8'), class: 'ml-1 outline-none focus:outline-none'

[kyainuma]

@aiandrox ごめんなさい、遅くなりました。。。 relativeでも特に変わらいような。。。

[aiandrox]

@kyainuma あ、これの問題って背景色の切れ目がおかしいことだとだと思っていた……。

[kyainuma]

@aiandrox なるほどw 僕は背景色が青色に変わる事が問題だと思っていました！ どっちの方向で修正します？

[aiandrox]

@kyainuma 背景色はそれ自体がブラウザごとの仕様で、変えようとするならCSS直接編集しないといけないので、こっちのでお願いします🙇‍♂️

[kyainuma]

@aiandrox 修正しました！確認お願いします！