検索フォームのデザイン

Web制作

• CSS
• HTML

DEMO

初期デザインのフォーム

一体型

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

概要

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

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

コード

HTML

<h3>初期デザインのフォーム</h3>
<div class="block">
  <input type="text"><input type="submit">
</div>

<h3>一体型</h3>
<div class="block">
  <div class="form02">
    <input class="input02" type="text">
    <input class="submit02" type="submit" value="検索">
  </div>
</div>

<h3>一体型(画像ボタンによるsubmit)</h3>
<div class="block">
  <div class="form03">
    <input class="input03" type="text" placeholder="検索">
    <input class="submit03" type="submit" value="">
  </div>
</div>

CSS

.form02{
  display: flex;
}
.input02{
  padding: 0 4px;
  border: 1px solid #3498DB;
}
.submit02{
  padding: 4px 8px;
  border: 1px solid #3498DB;
  border-left: none;
  background-color: #3498DB;
  color: #fff;
  cursor: pointer;
}
.form03{
  display: inline-flex;
  border: 1px solid #3498DB;
}
.input03{
  padding: 0 8px;
  border: none;
}
.submit03{
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  border: none;
  background-color: #fff;
  background-image: url('pathto/search-blue.svg');
  background-size: 80% 80%;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
}