東京都府中市のWEB制作会社Maromaroのブログです

丸みのあるサーチフォーム

  • RESULT
  • HTML
  • CSS
  • コピー
    <div class="msr_search_06">
      <form>
        <input type="text" value="">
        <button type="submit">Search</button>
      </form>
    </div>
  • コピー
    .msr_search_06 form{
      height:32px;
      width:240px;
      position:relative;
    }
    .msr_search_06 form input[type=text]{
      width:240px;
      height:32px;
      padding:4px 40px 4px 8px;
      border:none;
      -webkit-border-radius:32px;
         -moz-border-radius:32px;
              border-radius:32px;
      -webkit-appearance: none;
      outline: 0;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      position:absolute;
      background:#EEEEEE;
      top:0;
      right:0;
      backface-visibility: hidden;
      -webkit-transition: 0.25s ease-out;
         -moz-transition: 0.25s ease-out;
           -o-transition: 0.25s ease-out;
              transition: 0.25s ease-out;
    }
    .msr_search_06 form input[type=text]:focus{
      background:#F6F6F6;
    }
    .msr_search_06 form button{
      width:64px;
      height:32px;
      color:#fff;
      border:none;
      -webkit-border-radius:16px;
         -moz-border-radius:16px;
              border-radius:16px;
      background:#1B73BA;
      display:inline-block;
      -webkit-appearance: none;
      outline: 0;
      position:absolute;
      top:0;
      right:0;
      cursor:pointer;
      backface-visibility: hidden;
      -webkit-transition: 0.3s ease-out;
         -moz-transition: 0.3s ease-out;
           -o-transition: 0.3s ease-out;
              transition: 0.3s ease-out;
    }
    .msr_search_06 form button:hover{
      opacity:0.8;
    }

検証済みブラウザ

  • Edge
  • FF
  • chrome
  • Safari

「Search」のボタンの内容を虫メガネアイコンなどにしてボタンを正円にすると、よりオシャレな感じになります。

  • このエントリーをはてなブックマークに追加

その他のフォーム

Radio_button

Chack_box

Pulldown

file

スタイリッシュなフォーム
フォームの一覧をもっと見る

要素一覧