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

フラットなサーチフォーム

  • RESULT
  • HTML
  • CSS
  • コピー
    <form>
      <div class="msr_search_02">
        <input type="text">
        <input type="submit" value="">
      </div>
    </form>
  • コピー
    /*--------------------------------------
    検索
    ---------------------------------------*/
    .msr_search_02 {
      border: 1px solid #1B73BA;
      position: relative;
      width: 270px;
    }
    .msr_search_02 input[type=text] {
      border: none;
      color: #000000;
      padding: 0;
      padding: 10px;
      height: 10px;
      width: 210px;
    }
    .msr_search_02 input[type=text]:focus{
      outline:none;
    }
    .msr_search_02 input[type=submit] {
      background: #FFFFFF url(/stylerecipe_img/flat_search_btn01.png) no-repeat;
      border-bottom: 0;
      border-left: 0;
      border-right: 0;
      border-top: 0;
      cursor: pointer;
      margin: 0;
      padding: 0;
      position: absolute;
      right: 1px;
      top: 0;
      transition: 0.2s ease-in-out;
      -o-transition: 0.2s ease-in-out;
      -moz-transition: 0.2s ease-in-out;
      -webkit-transition: 0.2s ease-in-out;
      height: 30px;
      width: 60px;
    }
    .msr_search_02 input[type=submit]:hover {
      opacity: 0.6;
    }

検証済みブラウザ

  • Edge
  • FF
  • chrome
  • Safari

画像へのパスは任意のものに書き換えてください!
使用している画像はこちら

その他のフォーム

Radio_button

Chack_box

Pulldown

file

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

要素一覧