ransackで作成した検索フォームをアイコンで表示したい

Question

ご覧いただきありがとうございます。

Ruby on Railsでポートフォリを作成中ですが、UI/UXを整える観点からransackで作成した検索フォームのデザインを変更したいです。

この検索フォームでは、投稿した内容を名前であいまい検索できるように設定しています。

自分でコードの配置を変えてみたり、ググってみましたが解決できませんでしたので、ぜひお力を貸していただきたいです。

至らない点があるかもしれませんが、その際はご指摘いただければと思います。

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

イメージは、下記画像の通りです。

↓

コードはslimで記述しています。

ransackで実装した検索フォームのcode

= search_form_for @q do |f|
  = f.label :name_cont
   = f.search_field :name_cont
  = f.submit

採用したいデザインの検索フォームのcode

form.search-container action="" 
  input#search-box.search-box name="q" type="text" /
  label for="search-box" 
    i.fas.fa-search
  input#search-submit type="submit" /

$tl: 0.6s; // transition length

.search-box {
  transition: width $tl, border-radius $tl, background $tl, box-shadow $tl;
  width: 40px;height: 40px;
  border-radius: 20px;border: none;
  cursor: pointer;
  background: rgb(212, 211, 211);
  & + label .search-icon {    color: black    }
  &:hover {
    color: rgb(238, 235, 235);
    background: rgb(200, 200, 200);
    box-shadow: 0 0 0 5px rgb(61, 71, 82);
    & + label .search-icon {    color: white    }
  }
  &:focus {
    transition: width $tl cubic-bezier(0,1.22,.66,1.39), border-radius $tl, background $tl;
    border: none;outline: none;
    box-shadow: none;
    padding-left: 15px;
    cursor: text;
    width: 300px;
    border-radius: auto;
    background: rgb(212, 211, 211);
    color: black;
    & + label .search-icon {    color: black;    }
  }
  &:not(:focus) {    text-indent:-5000px;    } // for more-graceful falling back (:not browsers likely support indent)
}

#search-submit {
  position: relative;left: -5000px;
}

.fa-search {
  position: relative;
  left: -30px;
  color: white;
  cursor: pointer;
}

document.addEventListener("touchstart", function(){}, true);

Answer 1

質問したデザインを使用することができなかったので異なるデザインを使用したので解決とします。