検索フォーム
-
初期デザインのフォーム
一体型
一体型(画像ボタンによるsubmit)
概要
そのまま。様々な検索フォームです。
ボタン画像はICOOON MONOさんのものを利用しています。
コード(Qiita)
HTML
<ul id="formlist">
<li>
<p>初期デザインのフォーム</p>
<form action="#">
<input type="text"><input type="submit">
</form>
</li>
<li><p>一体型</p>
<form id="form01" action="#">
<input id="input01" type="text"><input id="submit01" type="submit" value="検索">
</form>
</li>
<li><p>一体型(画像ボタンによるsubmit)</p>
<form id="form02" action="#">
<input id="input02" type="text" placeholder="検索"><input id="submit02" type="submit" value=" ">
</form>
</li>
</ul>
</div>
CSS
#form01,#form02{
background-color: white;
width:200px;
height: 20px;
border: 1px green solid;
}
#form01 input,#form02 input{
vertical-align: top;
margin: 0px;
height: 100%;
box-sizing: border-box;
background-color: transparent;
}
#input01{
width: 150px;
border: none;
border-right: 1px green solid;
}
#submit01{
border: none;
width: 50px;
}
#form02{
border-radius: 10px;
}
#input02{
border: none;
width: 170px;
padding-left: 10px;
}
#submit02{
width: 30px;
border: none;
background-image: url(/mycode/img/bt/bt_search.png);
background-position: center;
background-size: auto 90%;
background-repeat: no-repeat;
}