検索フォームのデザイン

実装
初期デザインのフォーム
一体型
一体型(画像ボタンによる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;
}
}