• <kbd id="sucug"></kbd>
    技術頻道導航
    HTML/CSS
    .NET技術
    IIS技術
    PHP技術
    Js/JQuery
    Photoshop
    Fireworks
    服務器技術
    操作系統
    網站運營

    贊助商

    分類目錄

    贊助商

    最新文章

    搜索

    使用SVG實現的漂亮的復選框(checkbox)樣式

    作者:admin    時間:2022-12-5 18:34:44    瀏覽:

    今天介紹一個漂亮的復選框(checkbox)樣式,它是使用SVG實現的。

    漂亮的復選框(checkbox)樣式

    demodownload

    HTML

    <label class="c-custom-checkbox">
        <input type="checkbox" checked />
        <svg width="32" height="32" viewBox="-4 -4 39 39" aria-hidden="true" focusable="false">
            <!-- The background -->
            <rect class="checkbox__background" width="35" height="35" x="-2" y="-2" stroke="currentColor" fill="none" stroke-width="3"
                rx="6" ry="6"></rect>
            <!-- The checkmark-->
            <polyline class="checkbox__checkmark" points="4,14 12,23 28,5" stroke="transparent" stroke-width="4" fill="none"></polyline>
        </svg>

        <span>復選框 - 測試演示</span>
    </label>

    代碼分析

    從HTML代碼看到,復選框的樣式使用了SVG來設計。

    使用 SVG 創建自定義復選框具有靈活、且易于訪問的優點。

    使用 SVG,我們不為復選框本身設置樣式——我們隱藏復選框并使用 SVG 來創建復選框圖像。所以 SVG 只是復選框的視覺替換。

    因此,為了使用 SVG 樣式化復選框,我們需要將 SVG 添加到標記中的某處。當然,你可以將 SVG 用作背景圖像(在復選框上label)。

    SVG的樣式設計如下面的CSS代碼。

    CSS

    .c-custom-checkbox {
      cursor: pointer;
      display: flex;
      align-items: flex-start;
      --checked-state-bg-color: hsl(350, 95%, 58%);
      --checked-state-check-color: #fff;
      --outline-color: var(--checked-state-bg-color);
      --outline-offset: 2px;
    }

    .c-custom-checkbox input[type=checkbox] {
      /* 從頁面流中刪除復選框,將其放置在SVG的頂部 */
      position: absolute;
      /* set same dimensions as the SVG */
      width: 1em;
      height: 1em;
      /* 隱藏它 */
      opacity: 0.00001;
    }

    .c-custom-checkbox svg {
      /* 設置SVG維度,例如相對于字體大小,使其與字體大小成比例 */
      width: 1em;
      height: 1em;
      margin-right: 0.5em;
      margin-top: 0.1em;
      /* 將轉換應用于svg中的元素 */
    }
    .c-custom-checkbox svg * {
      transition: all 0.1s linear;
    }

    .c-custom-checkbox input[type=checkbox]:checked + svg .checkbox__background {
      fill: var(--checked-state-bg-color);
      stroke: var(--checked-state-bg-color);
    }
    .c-custom-checkbox input[type=checkbox]:checked + svg .checkbox__checkmark {
      stroke: var(--checked-state-check-color);
    }

    .c-custom-checkbox input[type=checkbox]:focus + svg {
      outline: 3px solid var(--outline-color);
      outline-offset: var(--outline-offset);
    }

    .c-custom-checkbox input[type=checkbox]:focus:not(:focus-visible) + svg {
      outline: none;
    }

    代碼分析

    1、處理復選框定位和隱藏的 CSS

    .c-custom-checkbox {
        /* 為標簽中的復選框創建定位上下文*/
        position: relative;

        /* 這里為其他 label 樣式 */
    }

    .c-custom-checkbox input[type="checkbox"] {
        /* 從流中刪除復選框 */
        position: absolute;

        /* 視覺上隱藏它 */
        opacity: 0; 

        /* 根據需要調整大小和位置 */
        width: 1em;
        height: 1em;

        /* 將其放置在SVG頂部的標簽內 */
        top: ...;
        left: ...;

        /* 有時候你需要添加 z-index */
        z-index: ...;
    }

    所以復選框在技術上仍然在它應該在的地方,它仍然是交互式的,它是完全可訪問的,但它在視覺上是隱藏的,所以它可以被一個更有風格的替代品取代:SVG。

    2、:focus狀態時的樣式

    由于我們隱藏了原始復選框,因此我們需要在視覺上替換選中和未選中狀態以及焦點樣式。

    SVG 放置在 DOM 中的復選框之后,因此我們可以使用相鄰的兄弟選擇器選擇它,并根據復選框的狀態設置樣式。因此,當復選框獲得焦點時,我們在 SVG 上顯示焦點輪廓:

    /* 當SVG接收焦點時,直觀地顯示焦點輪廓 */
    .c-custom-checkbox input[type="checkbox"]:focus + svg {
        outline: 3px solid #E55360;
        outline-offset: 2px;
    }

    /* 隱藏鼠標用戶的焦點樣式 */
    .c-custom-checkbox input[type="checkbox"]:focus:not(:focus-visible) + svg {
        outline: none;
    }

    焦點樣式可以是你想要的任何樣式,只要它非常清晰且視覺上易于訪問即可。同樣,你可以使用選擇器添加禁用狀態樣式:disabled。

    3、選中/取消選中 SVG 中的復選框

    為了模擬選中/取消選中 SVG 中的復選框,我們顯示/隱藏其中的復選標記,并更改背景顏色: 

    /*svg 基礎樣式 */
    .c-custom-checkbox svg {
      /* 設置SVG維度,例如相對于字體大小,使其與標簽中文本的大小成比例 */
      width: 1em;
      height: 1em;

      /* ... */

      /* 將轉換應用于svg中的元素 */
      * {
        transition: all 0.1s linear;
      }
    }

    /* 選中復選框時,更改svg內部的樣式 */
    .c-custom-checkbox input[type="checkbox"]:checked + svg {
      .checkbox__bg {
        fill: var(--checked-state-bg-color);
        stroke: var(--checked-state-bg-color);
      }

      .checkbox__checkmark {
        stroke: var(--checked-state-checkmark-color);
      }
    }

    4、優化SVG復選框樣式

    你可以更進一步并針對 Windows 高對比度模式優化它:

    .c-custom-checkbox svg {
      @media screen and (-ms-high-contrast: active) {
        .checkbox__bg {
          stroke: windowText;
        }
      }
    }

    @media screen and (-ms-high-contrast: active) {
      .c-custom-checkbox input[type="checkbox"]:checked + svg {
        .checkbox__bg {
          fill: windowText;
        }

        .checkbox__checkmark {
          stroke: highlight;
        }
      }
    }

    總結

    使用內聯 SVG 的眾多好處之一是我們擁有真實的元素(復選標記和正方形)以及我們可以靈活設置樣式的真實邊界(筆畫),因此我們不依賴背景圖像和顏色來創建和傳達狀態,因為背景圖像、顏色和陰影等效果通常在用戶控制的環境中被覆蓋。

    相關文章

    標簽: css  checkbox  復選框  
    x
    • 站長推薦
    国产成年女人人AA人视频看看-婷婷黄色视频-一女被两男吃奶添下A片免费-欧美黑人又粗又大高潮喷水