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