検索ボックスの中にアイコンを入れる

某サイトのこれを真似してみたくなったので、備忘録として書きます。

  <header>
    <div class="header-inner">
      <h1>TESTタイトル</h1>
      <form>
        <input type="text" placeholder="アニメタイトルや声優で検索♪">
        <button>あ</button>
      </form>
    </div>
  </header>

• あ はアイコンとします

まだ程遠いですね。

1. form周りを整える

.header-inner form input {
  width: 300px;
  height: 100%;
  display: block;
  padding: 0px 20px;
  border-radius: 20px;
  border: 1px solid black;
  font-size: 20px;
  line-height: 1;
}

• inputタグはインライン要素なので、扱いやすいようにblock要素にします。
• border-radiusでフォームを丸くします。
• 文字の打ちはじめの位置が左端スタートになってしまうので、input内の両端にゆとりを持たせるため padding を指定します。

2. placeholderに対してCSSを当てる

.header-inner form input::placeholder {
  font-size: 14px;
  position: relative;
  bottom: 2px;
}

3. ボタンを 検索窓の中に持ってくる

.header-inner form {
  display: block;
  position: relative;
  height: 40px;
}
.header-inner form button {
  position: absolute;
  right: 7px;
  top: 50%;
  font-size: 25px;
  transform: translateY(-50%);
}  

ここで、 position:relative, position:absolute が出てきます。

position:relative の起点は、現在いる位置からになります。
position:absoluteは、何も指定していなければページ全体になります。しかし、親要素にposition:relativeを加えることで、親要素を起点にすることができます。

なので今回のケースだと、

• formに対して position:relative を指定する
• buttonに対して position:absolute を指定して、 formを親要素として、位置を決める
  ことによって、ボタンの位置をform内で自由に動かすことができます。

top: 50%; transform: translateY(-50%); を指定することによって、親要素の高さが可変になっても button の位置が真ん中をキープするようになります。

だいぶ近くなりました。