设置表单控件的样式

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

帮助用户选择一个选项

<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。

您还应将 font-size 更改为至少 1rem （对于大多数浏览器，其默认值为 16px）。<select> 这样做会导致表单控件获得焦点时无法在 iOS Safari 上缩放网页。

当然，您也可以更改元素颜色，使其与您的品牌颜色相称。 添加了一些间距、:hover 和 :focus 样式后， <select> 元素的外观现在在各个浏览器之间保持一致。

请观看以下演示 打造 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;。
再试一次！

资源