久久精品国产精品国产精品污,亚洲色成人四虎在线观看,亚洲熟妇无码另类久久久,揉她小豆豆揉到失禁H

  • <acronym id="1hxtt"><label id="1hxtt"></label></acronym>
    <pre id="1hxtt"></pre>
    <pre id="1hxtt"><ruby id="1hxtt"></ruby></pre>

    1. 技術頻道導航
      HTML/CSS
      .NET技術
      IIS技術
      PHP技術
      Js/JQuery
      Photoshop
      Fireworks
      服務器技術
      操作系統
      網站運營

      贊助商

      分類目錄

      贊助商

      最新文章

      搜索

      自定義顏色穩重大方通用搜索框(純CSS實現)

      作者:admin    時間:2022-8-11 15:28:59    瀏覽:

      本文介紹一個穩重大方的自定義背景顏色通用搜索框,它是由純CSS實現的,沒有圖片和JS代碼。

       純CSS實現自定義顏色穩重大方通用搜索框

      demodownload

      完整HTML代碼

      <!DOCTYPE html>
      <html>
      <head>
        <meta charset="UTF-8">
      <style>
      input, button {
        background: none;
        outline: none;
        border: none;
        color: transparent;
        background-repeat: no-repeat;
      }

      .form {
        width: 100%;
      }
      .form:invalid .form__reset {
        opacity: 0;
        pointer-events: none;
      }
      .form:invalid .form__button {
        pointer-events: none;
        pointer: default;
      }
      .form:valid .form__reset {
        opacity: 1;
        pointer-events: all;
      }
      .form__label {
        display: flex;
        align-items: center;
        padding: 10px 20px;
        background-color: black;
        border: 1px solid transparent;
        border-radius: 5px;
        transition: border 0.066s linear;
      }
      .form__label:hover {
        border: 1px solid cyan;
      }
      .form__label:focus-within {
        border: 1px solid blue;
      }
      .form__fieldset {
        display: flex;
        align-items: center;
        justify-items: stretch;
        width: 100%;
      }
      .form__input {
        display: inline-block;
        vertical-align: middle;
        min-width: 200px;
        width: 100%;
        background-color: transparent;
        color: white;
      }
      .form__input::placeholder {
        color: lightgray;
      }
      .form__glass {
        justify-self: start;
        vertical-align: middle;
        margin-right: 10px;
      }
      .form__reset {
        justify-self: end;
        vertical-align: middle;
        cursor: pointer;
        padding: 5px;
        margin-left: 10px;
        width: 12px;
        height: 12px;
        background-position: center;
        background-size: 12px 12px;
        background-repeat: no-repeat;
        border: 1px solid transparent;
        transform-origin: center;
        transform: rotate(0);
        transition: border 0.066s linear, transform 0.066s linear, opacity 0.15s linear;
      }
      @media (prefers-reduced-motion: true) {
        .form__reset {
          transition: none;
        }
      }
      .form__reset:hover {
        transform: rotate(90deg);
      }
      .form__reset:focus {
        border: 1px solid blue;
      }
      .form__button {
        margin-left: 5px;
        background-color: black;
        color: white;
        align-self: stretch;
        padding: 10px 20px;
        cursor: pointer;
        border-radius: 5px;
      }
      </style>

      </head>

      <body translate="no" >
        <form class="form">
        <fieldset class="form__fieldset">
          <label class="form__label" 
                 for="searchbar">
            <img class="form__glass"
                 src="data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaGVhZGVyLXNlYXJjaF9fZm9ybV9fZ2xhc3MiCiAgICAgd2lkdGg9IjIwIiBoZWlnaHQ9IjIxIgogICAgIHZpZXdCb3g9IjAgMCAyMCAyMSIKICAgICBmaWxsPSJub25lIgogICAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTIuMTYxNTMgOS4yNjQ3MUMyLjE2MTUzIDUuNjgyOTggNS4wNjUxIDIuNzc5NDEgOC42NDY4MyAyLjc3OTQxQzEyLjIyODYgMi43Nzk0MSAxNS4xMzIxIDUuNjgyOTggMTUuMTMyMSA5LjI2NDcxQzE1LjEzMjEgMTEuMDUyNyAxNC40MDk4IDEyLjY3MDMgMTMuMjM4NyAxMy44NDQ0QzEyLjA2MzYgMTUuMDIyNiAxMC40NDEgMTUuNzUgOC42NDY4MyAxNS43NUM1LjA2NTEgMTUuNzUgMi4xNjE1MyAxMi44NDY0IDIuMTYxNTMgOS4yNjQ3MVpNOC42NDY4MyAwLjkyNjQ3MkM0LjA0MTc1IDAuOTI2NDcyIDAuMzA4NTk0IDQuNjU5NjMgMC4zMDg1OTQgOS4yNjQ3MUMwLjMwODU5NCAxMy44Njk4IDQuMDQxNzUgMTcuNjAyOSA4LjY0NjgzIDE3LjYwMjlDMTAuNjE1MiAxNy42MDI5IDEyLjQyNTQgMTYuOTIgMTMuODUxNCAxNS43Nzk1TDE3Ljg3NDEgMTkuODAyMkMxOC4yMzU5IDIwLjE2NCAxOC44MjI1IDIwLjE2NCAxOS4xODQzIDE5LjgwMjJDMTkuNTQ2MSAxOS40NDA0IDE5LjU0NjEgMTguODUzOCAxOS4xODQzIDE4LjQ5MTlMMTUuMTYxNiAxNC40NjkzQzE2LjMwMjEgMTMuMDQzMiAxNi45ODUxIDExLjIzMzEgMTYuOTg1MSA5LjI2NDcxQzE2Ljk4NTEgNC42NTk2MyAxMy4yNTE5IDAuOTI2NDcyIDguNjQ2ODMgMC45MjY0NzJaIiBmaWxsPSJyZ2IoMTQ3LCAxNTMsIDE3MikiLz4KPC9zdmc+Cg=="
                 width="20" height="21"/>
            <input class="form__input"
                   type="search"
                   name="q"
                   id="searchbar"
                   placeholder="輸入關鍵詞"
                   tabindex="0"
                   required/>
            <input type="reset"
                   class="form__reset"
                   style="background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiCiAgICAgdmlld0JveD0iMCAwIDEyIDEyIgogICAgIGZpbGw9Im5vbmUiCiAgICAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0xMS43MDcxIDEuNzA3MTFDMTIuMDk3NiAxLjMxNjU4IDEyLjA5NzYgMC42ODM0MTcgMTEuNzA3MSAwLjI5Mjg5M0MxMS4zMTY2IC0wLjA5NzYzMTEgMTAuNjgzNCAtMC4wOTc2MzExIDEwLjI5MjkgMC4yOTI4OTNMMTEuNzA3MSAxLjcwNzExWk0wLjI5Mjg5MyAxMC4yOTI5Qy0wLjA5NzYzMTEgMTAuNjgzNCAtMC4wOTc2MzExIDExLjMxNjYgMC4yOTI4OTMgMTEuNzA3MUMwLjY4MzQxNyAxMi4wOTc2IDEuMzE2NTggMTIuMDk3NiAxLjcwNzExIDExLjcwNzFMMC4yOTI4OTMgMTAuMjkyOVpNMTAuMjkyOSAxMS43MDcxQzEwLjY4MzQgMTIuMDk3NiAxMS4zMTY2IDEyLjA5NzYgMTEuNzA3MSAxMS43MDcxQzEyLjA5NzYgMTEuMzE2NiAxMi4wOTc2IDEwLjY4MzQgMTEuNzA3MSAxMC4yOTI5TDEwLjI5MjkgMTEuNzA3MVpNMS43MDcxMSAwLjI5Mjg5M0MxLjMxNjU4IC0wLjA5NzYzMTEgMC42ODM0MTcgLTAuMDk3NjMxMSAwLjI5Mjg5MyAwLjI5Mjg5M0MtMC4wOTc2MzExIDAuNjgzNDE3IC0wLjA5NzYzMTEgMS4zMTY1OCAwLjI5Mjg5MyAxLjcwNzExTDEuNzA3MTEgMC4yOTI4OTNaTTEwLjI5MjkgMC4yOTI4OTNMMC4yOTI4OTMgMTAuMjkyOUwxLjcwNzExIDExLjcwNzFMMTEuNzA3MSAxLjcwNzExTDEwLjI5MjkgMC4yOTI4OTNaTTExLjcwNzEgMTAuMjkyOUwxLjcwNzExIDAuMjkyODkzTDAuMjkyODkzIDEuNzA3MTFMMTAuMjkyOSAxMS43MDcxTDExLjcwNzEgMTAuMjkyOVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=')"
                   tabindex="0"/>
          </label>
          <button class="form__button"
                  type="submit"
                  title="Search this website now"
                  tabindex="0">搜索</button>
        </fieldset>
      </form>
      </body>
      </html>

      代碼解釋

      我們可以很輕松的修改搜索框、按鈕背景及文字顏色。

      搜索框背景顏色

      .form__label {
        ...
        background-color: black;
        ...
      }

      black改為blue,搜索框背景就變成為藍色。

      按鈕背景及文字顏色

      .form__button {
        ...
        background-color: black;
      color: white;
        ...
      }

      black改為blue,按鈕顏色就變成為藍色。把white改為yellow,按鈕文字就變成為黃色。

      修改結果

       

      搜索圖標

      下面這個代碼是搜索圖標,,代碼里可以定義寬(width)和高(height)。

      <img class="form__glass" src="...">

      重設圖標

      下面這個代碼是重設圖標,??梢酝ㄟ^類form__reset設置該圖標的樣式及轉動動畫。

      <input type="reset" ... >

      這兩個圖標都是使用base64代碼來表示,方便代碼遷移,減少HTTP請求。

      總結

      本文介紹了純CSS實現的自定義顏色穩重大方通用搜索框,該搜索框可以自定義樣式,非常實用。

      相關文章

      在下面這篇文章純CSS3實現精美搜索框中,介紹如何使用CSS3配合HTML placeholder屬性創建一個精美的CSS3搜索框。

      CSS3搜索框

       

      標簽: search-box  搜索框  
      x
      • 站長推薦
      久久精品国产精品国产精品污,亚洲色成人四虎在线观看,亚洲熟妇无码另类久久久,揉她小豆豆揉到失禁H