设置表单控件的样式

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

帮助用户选择一个选项

<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;。
再试一次！

资源