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

スタイリッシュなサーチフォーム

  • RESULT
  • HTML
  • CSS
  • コピー
    <form>
      <div class="msr_search_05">
        <input type="text">
        <input type="submit" value="Search">
      </div>
    </form>
  • コピー
    
    /*--------------------------------------
    検索
    ---------------------------------------*/
    .msr_search_05 {
      position: relative;
      border: 1px solid #999999;
      width: 270px;
    }
    .msr_search_05 input[type=text] {
      border: none;
      padding: 10px;
      height: 10px;
      width: 220px;
    }
    .msr_search_05 input[type=text]:focus{
      outline:none;
    }
    .msr_search_05 input[type=submit] {
      background:#FFFFFF;
      border:none;
      border-left: 1px solid #999999;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      color:#333333;
      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_05 input[type=submit]:hover {
      color:#AAAAAA;
    }

検証済みブラウザ

  • Edge
  • FF
  • chrome
  • Safari

その他の

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

要素一覧