8款好看的纯CSS3搜索框

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>8款纯CSS3搜索框</title>

  <link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
  <style>
    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      padding: 0;
      background: #494A5F;
      font-weight: 500;
      font-family: "Microsoft YaHei","宋体","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo;
    }

    #container {
      width: 500px;
      height: 820px;
      margin: 0 auto;
    }
    div.search {padding: 30px 0;}

    form {
      position: relative;
      width: 300px;
      margin: 0 auto;
    }

    input, button {
      border: none;
      outline: none;
    }

    input {
      width: 100%;
      height: 42px;
      padding-left: 13px;
    }

    button {
      height: 42px;
      width: 42px;
      cursor: pointer;
      position: absolute;
    }

    /*搜索框1*/
    .bar1 {background: #A3D0C3;}
    .bar1 input {
      border: 2px solid #7BA7AB;
      border-radius: 5px;
      background: #F9F0DA;
      color: #9E9C9C;
    }
    .bar1 button {
      top: 0;
      right: 0;
      background: #7BA7AB;
      border-radius: 0 5px 5px 0;
    }
    .bar1 button:before {
      content: "\f002";
      font-family: FontAwesome;
      font-size: 16px;
      color: #F9F0DA;
    }

    /*搜索框2*/
    .bar2 {background: #DABB52;}
    .bar2 input, .bar2 button {
      border-radius: 3px;
    }
    .bar2 input {
      background: #F9F0DA;
    }
    .bar2 button {
      height: 26px;
      width: 26px;
      top: 8px;
      right: 8px;
      background: #F15B42;
    }
    .bar2 button:before {
      content: "\f105";
      font-family: FontAwesome;
      color: #F9F0DA;
      font-size: 20px;
      font-weight: bold;
    }

    /*搜索框3*/
    .bar3 {background: #F9F0DA;}
    .bar3 form {background: #A3D0C3;}
    .bar3 input, .bar3 button {
      background: transparent;
    }
    .bar3 button {
      top: 0;
      right: 0;
    }
    .bar3 button:before {
      content: "\f002";
      font-family: FontAwesome;
      font-size: 16px;
      color: #F9F0DA;
    }

    /*搜索框4*/
    .bar4 {background: #F15B42;}
    .bar4 form {
      background: #F9F0DA;
      border-bottom: 2px solid #BE290E;
    }
    .bar4 input, .bar4 button {
      background: transparent;
    }
    .bar4 button {
      top: 0;
      right: 0;
    }
    .bar4 button:before {
      content: "\f178";
      font-family: FontAwesome;
      font-size: 20px;
      color: #be290e;
    }

    /*搜索框5*/
    .bar5 {background: #683B4D;}
    .bar5 input, .bar5 button {
      background: transparent;
    }
    .bar5 input {
      border: 2px solid #F9F0DA;
    }
    .bar5 button {
      top: 0;
      right: 0;
    }
    .bar5 button:before {
      content: "\f002";
      font-family: FontAwesome;
      font-size: 16px;
      color: #F9F0DA;
    }
    .bar5 input:focus {
        border-color: #311c24
    }

    /*搜索框6*/
    .bar6 {background: #F9F0DA;}
    .bar6 input {
      border: 2px solid #c5464a;
      border-radius: 5px;
      background: transparent;
      top: 0;
      right: 0;
    }
    .bar6 button {
      background: #c5464a;
      border-radius: 0 5px 5px 0;
      width: 60px;
      top: 0;
      right: 0;
    }
    .bar6 button:before {
      content: "搜索";
      font-size: 13px;
      color: #F9F0DA;
    }


    /*搜索框7*/
    .bar7 {background: #7BA7AB;}
    .bar7 form {
      height: 42px;
    }
    .bar7 input {
      width: 250px;
      border-radius: 42px;
      border: 2px solid #324B4E;
      background: #F9F0DA;
      transition: .3s linear;
      float: right;
    }
    .bar7 input:focus {
      width: 300px;
    }
    .bar7 button {
      background: none;
      top: -2px;
      right: 0;
    }
    .bar7 button:before{
      content: "\f002";
      font-family: FontAwesome;
      color: #324b4e;
    }

    /*搜索框8*/
    .bar8 {background: #B46381;}
    .bar8 form {
        height: 42px;
    }
    .bar8 input {
      width: 0;
      padding: 0 42px 0 15px;
      border-bottom: 2px solid transparent;
      background: transparent;
      transition: .3s linear;
      position: absolute;
      top: 0;
      right: 0;
      z-index: 2;
    }
    .bar8 input:focus {
      width: 300px;
      z-index: 1;
      border-bottom: 2px solid #F9F0DA;
    }
    .bar8 button {
      background: #683B4D;
      top: 0;
      right: 0;
    }
    .bar8 button:before {
      content: "\f002";
      font-family: FontAwesome;
      font-size: 16px;
      color: #F9F0DA;
    }
  </style>
</head>
<body>
<div id="container">
  <div class="search bar1">
    <form>
      <input type="text" placeholder="请输入您要搜索的内容...">
      <button type="submit"></button>
    </form>
  </div>

  <div class="search bar2">
    <form>
      <input type="text" placeholder="请输入您要搜索的内容...">
      <button type="submit"></button>
    </form>
  </div>

  <div class="search bar3">
    <form>
      <input type="text" placeholder="请输入您要搜索的内容...">
      <button type="submit"></button>
    </form>
  </div>

  <div class="search bar4">
    <form>
      <input type="text" placeholder="请输入您要搜索的内容...">
      <button type="submit"></button>
    </form>
  </div>

  <div class="search bar5">
    <form>
      <input type="text" placeholder="请输入您要搜索的内容...">
      <button type="submit"></button>
    </form>
  </div>

  <div class="search bar6">
    <form>
      <input type="text" placeholder="请输入您要搜索的内容...">
      <button type="submit"></button>
    </form>
  </div>

  <div class="search bar7">
    <form>
      <input type="text" placeholder="请输入您要搜索的内容...">
      <button type="submit"></button>
    </form>
  </div>

  <div class="search bar8">
    <form>
      <input type="text" placeholder="请输入您要搜索的内容...">
      <button type="submit"></button>
    </form>
  </div>
</div>
</body>
</html>

欢迎分享本文,转载请保留出处:前端ABC » 8款好看的纯CSS3搜索框

分享到:更多 ()

发表评论 0