使用SVG實現的漂亮的復選框（checkbox）樣式

技術頻道 - html技術

使用SVG實現的漂亮的復選框（checkbox）樣式

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

今天介紹一個漂亮的復選框（checkbox）樣式，它是使用SVG實現的。

漂亮的復選框（checkbox）樣式

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;
    }
  }
}