国产欧美一区二区精品久久久,亚州在线中文字幕,狂野欧美激情性XXXX

技術(shù)頻道 - html技術(shù)

使用SVG實現(xiàn)的漂亮的復(fù)選框（checkbox）樣式

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

今天介紹一個漂亮的復(fù)選框（checkbox）樣式，它是使用SVG實現(xiàn)的。

漂亮的復(fù)選框（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>復(fù)選框 - 測試演示</span>
</label>

代碼分析

從HTML代碼看到，復(fù)選框的樣式使用了SVG來設(shè)計。

使用 SVG 創(chuàng)建自定義復(fù)選框具有靈活、且易于訪問的優(yōu)點。

使用 SVG，我們不為復(fù)選框本身設(shè)置樣式——我們隱藏復(fù)選框并使用 SVG 來創(chuàng)建復(fù)選框圖像。所以 SVG 只是復(fù)選框的視覺替換。

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

SVG的樣式設(shè)計如下面的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] {
  /* 從頁面流中刪除復(fù)選框，將其放置在SVG的頂部 */
  position: absolute;
  /* set same dimensions as the SVG */
  width: 1em;
  height: 1em;
  /* 隱藏它 */
  opacity: 0.00001;
}

.c-custom-checkbox svg {
  /* 設(shè)置SVG維度，例如相對于字體大小，使其與字體大小成比例 */
  width: 1em;
  height: 1em;
  margin-right: 0.5em;
  margin-top: 0.1em;
  /* 將轉(zhuǎn)換應(yīng)用于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、處理復(fù)選框定位和隱藏的 CSS

.c-custom-checkbox {
    /* 為標簽中的復(fù)選框創(chuàng)建定位上下文*/
    position: relative;

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

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

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

    /* 根據(jù)需要調(diào)整大小和位置 */
    width: 1em;
    height: 1em;

    /* 將其放置在SVG頂部的標簽內(nèi) */
    top: ...;
    left: ...;

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

所以復(fù)選框在技術(shù)上仍然在它應(yīng)該在的地方，它仍然是交互式的，它是完全可訪問的，但它在視覺上是隱藏的，所以它可以被一個更有風格的替代品取代：SVG。

2、:focus狀態(tài)時的樣式

由于我們隱藏了原始復(fù)選框，因此我們需要在視覺上替換選中和未選中狀態(tài)以及焦點樣式。

SVG 放置在 DOM 中的復(fù)選框之后，因此我們可以使用相鄰的兄弟選擇器選擇它，并根據(jù)復(fù)選框的狀態(tài)設(shè)置樣式。因此，當復(fù)選框獲得焦點時，我們在 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;
}

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

3、選中/取消選中 SVG 中的復(fù)選框

為了模擬選中/取消選中 SVG 中的復(fù)選框，我們顯示/隱藏其中的復(fù)選標記，并更改背景顏色：

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

  /* ... */

  /* 將轉(zhuǎn)換應(yīng)用于svg中的元素 */
  * {
    transition: all 0.1s linear;
  }
}

/* 選中復(fù)選框時，更改svg內(nèi)部的樣式 */
.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、優(yōu)化SVG復(fù)選框樣式

你可以更進一步并針對 Windows 高對比度模式優(yōu)化它：

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

總結(jié)

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

相關(guān)文章