東京都府中市、渋谷区の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

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

その他の

  1. list
  2. list
  3. テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
丸カッコ番号付きのリスト
の一覧をもっと見る

要素一覧