検索フォームのデザイン

Web制作

• CSS
• HTML

実装

初期デザインのフォーム

一体型

一体型(画像ボタンによるsubmit)

概要

検索フォームのデザイン集。

ボタン画像はICOOON MONOさんのものを利用。

コード

HTML

<h3>初期デザインのフォーム</h3>
  <form action="#">
    <input type="text"><input type="submit">
  </form>
<h3>一体型</h3>
  <form id="form01" action="#">
    <input id="input01" type="text"><!--
    --><input id="submit01" type="submit" value="検索">
  </form>
<h3>一体型(画像ボタンによるsubmit)</h3>
  <form id="form02" action="#">
    <input id="input02" type="text" placeholder="検索"><!--
    --><input id="submit02" type="submit" value="">
  </form>

CSS

form{
  margin: 10px auto;
}
#form01,#form02{
  width: 90%;
  height: 30px;
  border: 1px #4286f4 solid;
  background-color: white;
}
#form01 input,#form02 input{
  box-sizing: border-box;
  height: 100%;
  margin: 0;
  border: none;
  background-color: white;
  vertical-align: top;   
}
#input01,#input02{
  width: 80%;
}
#submit01,#submit02{
  width: 20%;
}
input#input01{
  border-right: 1px #4286f4 solid;
}
#form02{
  border-radius: 15px;
}
#input02{
  padding-left: 10px;
  border-radius: 15px 0 0 15px;
}
#submit02{
  border-radius: 0 15px 15px 0;
  background-image: url(画像へのパス);
  background-position: center;
  background-size: auto 90%;
  background-repeat: no-repeat;
}
@media screen and (min-width: 481px) {
  #form01,#form02{
    width: 300px;
  }
}