表单控件样式

在本模块中，您将学习如何设置表单控件的样式，以及如何使其与您网站的其他样式相匹配。

帮助用户选择一个选项

<select> 元素

<select> 元素的默认样式看起来不太好，并且在不同浏览器之间外观不一致。

首先，我们来更改箭头。

select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    background-image: url(arrow.png);
    background-repeat: no-repeat;
    background-position: right .7em top 50%, 0 0;
    background-size: .65em auto;
}

要删除 <select> 元素的默认箭头，请使用 CSS appearance 属性。要显示您选择的箭头，请将箭头定义为 background。

您还应该将 <select> 元素的 font-size 更改为至少 1rem（对于大多数浏览器，默认值为 16px）。这样做将防止在 iOS Safari 上聚焦表单控件时页面缩放。

当然，您也可以更改元素颜色以匹配您的品牌颜色。在为间距、:hover 和 :focus 添加更多样式后，<select> 元素的外观现在在不同浏览器之间保持一致。

在以下来自 Styling a Select Like It’s 2019 的演示中查看此内容

<option> 元素呢？<option> 元素是所谓的 替换元素，其表示形式超出了 CSS 的范围。截至撰写本文时，您无法设置 <option> 元素的样式。

复选框和单选按钮

<input type="checkbox"> 和 <input type="radio"> 的外观在不同浏览器之间有所不同。

在各种浏览器上打开 演示，以查看差异。让我们看看如何确保复选框和单选按钮与您的品牌相匹配，并在跨浏览器中看起来相同。

过去，开发者无法直接设置 <input type="checkbox"> 和 <input type="radio"> 控件的样式。现在，可以通过复选框和单选按钮的伪元素来设置其样式。或者，可以使用以下替换技术为这些元素创建自定义样式。

首先，在视觉上隐藏默认的复选框和单选按钮。

input[type="radio"],
input[type="checkbox"] {
   position: absolute;
   opacity: 0;
}

重要的是使用 position: absolute 与 opacity: 0 结合使用，而不是 display: none 或 visibility: hidden，以便仅在视觉上隐藏控件。这将确保它们仍然通过浏览器的 无障碍功能树 公开。请注意，可能需要进一步设置样式，以确保视觉上隐藏的表单控件仍然位于其替换元素的“顶部”。这样做将有助于确保当屏幕阅读器打开时，或者当使用启用屏幕阅读器的触摸设备时，悬停在其中一个元素上，如果通过触摸进行浏览，则可以发现视觉上隐藏的控件，并且屏幕阅读器的可见焦点指示器通常会出现在控件在屏幕上呈现的位置。

要显示您的自定义复选框和单选按钮，您有不同的选择。您可以使用 ::before CSS 伪元素和 CSS background 属性，或使用内联 SVG 图像。

input[type="radio"] + label::before {
  content: "";
  width: 1em;
  height: 1em;
  border: 1px solid black;
  display: inline-block;
  border-radius: 50%;
  margin-inline-end: 0.5em;
}

input[type="radio"]:checked + label::before {
  background: black;
}

CSS 有很多可能性来确保复选框和单选按钮与您的品牌样式相匹配。

详细了解 设置 <input type="checkbox"> 和 <input type="radio"> 的样式 以及 自定义复选框样式。

如何为表单控件使用您网站的颜色

您是否想用一行代码将您网站的样式带到表单控件？您可以使用 accent-color CSS 属性来实现此目的。

checkbox {
  accent-color: orange;
}

检查您的理解情况

测试您对表单控件样式设置的知识

如何删除表单控件的平台原生样式？

使用 revert: all;。
再试一次！
使用 appearance: none;。
🎉
使用 appearance: revert;。
再试一次！
使用 revert: appearance;。
再试一次！

资源