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

マテリアルなサーチフォーム

  • RESULT
  • HTML
  • CSS
  • コピー
    <form>
      <div class="msr_search_03">
        <input type="text">
        <input type="submit" value="">
      </div>
    </form>
  • コピー
    /*--------------------------------------
    検索
    ---------------------------------------*/
    .msr_search_03 {
      position: relative;
      border: 1px solid #D7D7D7;
      border-radius: 3px;
      box-shadow: 0px 1px 2px rgba(0,0,0,0.1);
      -o-box-shadow: 0px 1px 2px rgba(0,0,0,0.1);
      -ms-box-shadow: 0px 1px 2px rgba(0,0,0,0.1);
      -moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.1);
      -webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.1);
      width: 270px;
    }
    .msr_search_03 input[type=text] {
      border: none;
      padding: 10px;
      height: 10px;
      width: 220px;
    }
    .msr_search_03 input[type=text]:focus{
      outline:none;
    }
    .msr_search_03 input[type=submit] {
      background: url(/stylerecipe_img/material_search_icon01.png) no-repeat;
      background-position: center;
      border-bottom: 0;
      border-left: 0;
      border-right: 0;
      border-top: 0;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      cursor: pointer;
      margin: 0;
      position: absolute;
      right: 0;
      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_03 input[type=submit]:hover {
      opacity: 0.6;
    }

検証済みブラウザ

  • Edge
  • FF
  • chrome
  • Safari

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

その他の

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

要素一覧