CSSでinputは可変幅でボタンなどは固定幅なレスポンシブ対応フォームを作る

よくECサイトで見かけるレスポンシブ対応の検索フォームの作り方を紹介したいと思います。display:table-cel を使っていくので、IE8以上対応です。

レスポンシブ

  
ラベル
  
  

    検索
  

/* リセット */
* 
{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
input, button 
{
  margin: 0;
  color: inherit;
  vertical-align: baseline;
  font: inherit;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 0;
  outline: 0;
}
input 
{
  line-height: normal;
}
input:focus 
{
  outline: none;
}
input::-webkit-search-decoration, 
input::-webkit-search-cancel-button, 
input::-ms-clear,
input::-ms-reveal 
{
  display: none;
}
input::-moz-focus-inner 
{
  padding: 0;
  border: 0;
}
button 
{
  text-transform: none;
  overflow: visible;
  cursor: pointer;
}
button::-moz-focus-inner 
{
  padding: 0;
  border: 0;
}

.fluid-input 
{
  display: table;
  width: 100%;
}
.fluid-input > * 
{
  display: table-cell;
  vertical-align: middle;
}
.label, .button 
{
  width: 1%;
  white-space: nowrap;
}
.label, .box, .button > button 
{
  padding: .8em 1.1em;
  line-height: 1.5;
}
.label 
{
  color: #606468;
  background-color: #363b41;
}
.box 
{
  width: 100%;
  background-color: #3b4148;
}
.button > button 
{
  color: #fff;
  background-color: #ea4c88;
}

display:table-cell を利用して input 部分は可変でそれ以外のボタンなどは固定幅を実現しています。ポイントは、.label と .button のCSSです。width:1% と white-space:nowrap の同時指定により、要素を最小幅で表示させることができます。.box には width:100% を指定することで最大幅で表示させます。

ここで、width の合計値が 102% になってしまうと思った方もいるかもしれません。しかし、table の特性で絶対に 100% は超えません。つまり、自動調整されるのです。とてもありがたい仕様ですね。