具有现代CSS功能的定制样式表单输入

如今，构建自定义复选框、单选按钮和切换开关完全可行，同时保持语义化和可访问性。我们甚至不需要一行 JavaScript 代码或额外的 HTML 元素！实际上，最近比过去更容易了。让我们来看看。

最终效果如下：

事情比以前容易多了！

原因是我们终于可以在 <input> 标签本身的 ::before 和 ::after 伪元素上设置样式了。这意味着我们可以保留并设置 <input> 的样式，而不需要任何额外的元素。以前，我们不得不依赖额外的 <div> 或 <code><span></span> 来实现自定义设计。

让我们看看 HTML 代码

这里没有什么特别的。我们只需使用这段 HTML 代码即可设置输入的样式：

<input type="checkbox" id="c1">
<input type="radio" id="r1">
<input type="checkbox" id="s1">

这就是 HTML 部分的全部内容，当然，建议添加 name 和 id 属性，以及匹配的 <label></label> 元素：

<label for="c1">复选框</label>
<input type="checkbox" id="c1">

<label for="r1">单选按钮</label>
<input type="radio" id="r1">

<label for="s1">开关</label>
<input type="checkbox" id="s1" class="switch">

开始设置样式

首先，我们检查对 appearance: none; 的支持，包括它的前缀版本。appearance 属性是关键，因为它旨在从元素中删除浏览器的默认样式。如果浏览器不支持此属性，则样式将不适用，并将显示默认的输入样式。这完全没问题，也是渐进增强的一个很好的例子。

@supports(-webkit-appearance: none) or (-moz-appearance: none) {
  input[type='checkbox'],
  input[type='radio'] {
    -webkit-appearance: none;
    -moz-appearance: none;
  }
}

就目前而言，appearance 仍处于工作草案阶段，但以下是支持情况：

此浏览器支持数据来自 Caniuse，其中包含更多详细信息。数字表示浏览器在该版本及更高版本中支持此功能。

桌面端

移动端/平板电脑

像链接一样，我们必须考虑表单元素的不同交互状态。我们在设置元素样式时会考虑这些状态：

• :checked
• :hover
• :focus
• :disabled

例如，以下是如何设置我们的切换输入样式、创建旋钮以及考虑 :checked 状态：

/* 切换容器 */
.switch {
  width: 38px;
  border-radius: 11px;
}

/* 切换旋钮 */
.switch::after {
  left: 2px;
  top: 2px;
  border-radius: 50%;
  width: 15px;
  height: 15px;
  background: var(--ab, var(--border));
  transform: translateX(var(--x, 0));
}

/* 选中时更改颜色和位置 */
.switch:checked {
  --ab: var(--active-inner);
  --x: 17px;
}

/* 当输入被禁用时，降低切换旋钮的不透明度 */
.switch:disabled:not(:checked)::after {
  opacity: .6;
}

我们将 <input> 元素用作容器。输入内部的旋钮是用 ::after 伪元素创建的。同样，不再需要额外的标记！

如果您打开演示中的样式，您会看到我们正在定义一些 CSS 自定义属性，因为这已成为在样式表中管理可重用值的一种很好的方法：

@supports(-webkit-appearance: none) or (-moz-appearance: none) {
  input[type='checkbox'],
  input[type='radio'] {
    --active: #275EFE;
    --active-inner: #fff;
    --focus: 2px rgba(39, 94, 254, .25);
    --border: #BBC1E1;
    --border-hover: #275EFE;
    --background: #fff;
    --disabled: #F6F8FF;
    --disabled-inner: #E1E6F9;
  }
}

但是我们使用自定义属性还有另一个原因——它们非常适合根据元素的状态更新值！我们这里不会详细介绍，但以下是如何根据不同状态使用自定义属性的示例。

/* 默认值 */
input[type='checkbox'],
input[type='radio'] {
  --active: #275EFE;
  --border: #BBC1E1;
  border: 1px solid var(--bc, var(--border));
}

/* 重写默认值 */
input[type='checkbox']:checked,
input[type='radio']:checked {
  --b: var(--active);
  --bc: var(--active);
}

/* 如果未选中且未禁用，则在悬停时应用另一种边框颜色 */
input[type='checkbox']:not(:checked):not(:disabled):hover,
input[type='radio']:not(:checked):not(:disabled):hover {
  --bc: var(--border-hover);
}

为了可访问性，我们应该添加自定义焦点样式。我们删除了默认的轮廓，因为它不能像我们设置样式的其他内容一样圆角。但是，带圆角的 box-shadow 可以创建一个像轮廓一样工作的圆角样式。

input[type='checkbox'],
input[type='radio'] {
  --focus: 2px rgba(39, 94, 254, .25);
  outline: none;
  transition: box-shadow .2s;
}

input[type='checkbox']:focus,
input[type='radio']:focus {
  box-shadow: 0 0 0 var(--focus);
}

也可以对齐和设置 HTML 中直接跟随 <input> 元素的 <label></label> 元素的样式：

<label for="c1">复选框</label>
<input type="checkbox" id="c1">

input[type='checkbox']   label,
input[type='radio']   label {
  display: inline-block;
  vertical-align: top;
  /* 其他样式 */
}

input[type='checkbox']:disabled   label,
input[type='radio']:disabled   label {
  cursor: not-allowed;
}

再次展示演示：

希望您能看到如今创建自定义表单样式有多么方便。由于直接在表单输入上的伪元素，它需要更少的标记。由于自定义属性，它需要更少的样式切换。并且由于 @supports，它具有相当不错的浏览器支持。

总而言之，这比我们过去不得不处理的开发体验要好得多！

以上是具有现代CSS功能的定制样式表单输入的详细内容。更多信息请关注PHP中文网其他相关文章！