検索ボックスのスタイリング

• Demo

<form class="search-form" role="search" action="" method="">
  <input type="text" name="" class="search-form-input" value="" placeholder="Search this Site" required="">
  <input type="submit" value="Search" class="search-form-button">
</form>

検索ボックス、上記のように <input type="text"> + <input type="submit"> の場合、はじめはこんな風に書いてた。

/* Bad */
.search-form {
  margin-top: 0;
  width: auto;
  border: 1px solid #383030;
  border-radius: 0;
  background-color: #FFF;
  line-height: 1;
}

.search-form-input {
  margin: 0;
  padding: .25em .5em;  
  width: auto;
  border: none;
  border-radius: 0;
  background: #FFF;
  font-size: inherit;
  color: inherit;
  line-height: inherit;
  width: 88%;
}

.search-form-button {
  margin-left: 0;
  margin-right: 0;
  height: 3.3em;
  width: 3.3em;
  border: 0;
  border-radius: 0;
  background-image: url(ico-search.png);
  background-repeat: no-repeat;
  background-size: 50% 50%;
  background-position: center center;
  background-color: #383030;
  text-indent: -9999px;
}

でも、出来上がった検索ボックスは入力エリアを padding で取って検索ボタンを幅と高さの調整で取っていたせいで検索ボックスの内側に変な空きができた。それに、各種要素の focus 時には outline が上手いこと当たっていなかった。

これらを解決するために次のコードに修正した。

/* Better */
.search-form {
  position: relative;
  margin-top: 0;
  width: 26em;
  max-width: 100%;
}

.search-form-input {
  padding: 0;
  padding-left: .5em;
  padding-right: 2.5em;
  width: 100%;
  height: 2em;
  border: 1px solid #383030;
  border-radius: 0;
  background: #FFF;
  font-size: inherit;
  color: inherit;
  box-sizing: border-box;
  -webkit-appearance: none;
}

.search-form-button {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0;
  width: 2em;
  height: 2em;
  border: 0;
  border-radius: 0;
  background-image: url(ico-search.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 50% 50%;
  background-color: #383030;
  font-size: inherit;
  line-height: inherit;
  text-indent: -9999px;
}

.search-form-button を position プロパティを使って .search-form の右端に寄せてる。
検索ボックスの幅は .search-form-input の幅で取るようになっていて、右の padding にはボタン幅を余分にもたせている。
高さは入力エリアとボタン両方に同じ値を指定して取ってる。

自分では中々解決できない問題だったので、hail2u.net の検索ボックスをかなり参考にさせてもらいました。