如何使用CSS设置常见表单元素的样式

来自菜鸟教程
跳转至：导航、​搜索

作为 Write for DOnations 计划的一部分，作者选择了 Diversity in Tech Fund 来接受捐赠。

介绍

Web 表单是网站设计的常见元素，其复杂程度从搜索表单字段到联系表单和复杂的数据过滤不等。 了解如何使用 CSS 对这些元素进行样式设置和使用有助于为这些日常问题提供更好的解决方案，并可以改善用户对网站的体验。

本教程介绍了向用户请求各种数据的 Web 表单的创建和样式。 该表单将使用文本字段、单选按钮、复选框、下拉选择、文本区域以及提交和重置按钮。 您将通过使用 appearance 属性重置样式、为表单设置自己的一致样式、为文本字段添加占位符答案以及使用自定义单选按钮和复选框来创建并设置此表单及其元素的样式各种伪类和伪元素。

先决条件

设置基本 HTML 和 CSS

在第一部分中，您将设置在本教程的其余部分中将使用的 HTML 和初始样式。 该 HTML 将设置页面的脚手架并创建您稍后将设置样式的表单字段。

首先在编辑器中打开 index.html 文件。 然后，添加以下 HTML 以提供文件的基本结构：

索引.html 

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>CSS Form</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <main>
    </main>
  </body>
</html>

<head> 元素中包含的元素使用 <title> 元素定义页面名称以及通过 <link> 元素加载样式表的位置。 <meta> 标签定义字符编码并指示浏览器如何在小屏幕设备上显示站点。 主表单内容将驻留在 <body> 和 <main> 标签内。

接下来，在 <main> 元素内，创建一个 <form> 元素。 在 <form> 中，您将添加各种表单元素和 <div> 元素以帮助布局。 在本教程中，突出显示了前面步骤中添加的代码。 将以下代码块中突出显示的 HTML 添加到您的 index.html 文件中：

索引.html 

...
<main>
  <form>
    <div>
      <label for="name">Name</label>
      <input id="name" type="text" />
    </div>
    <div>
      <label for="email">Email</label>
      <input id="email" type="email" />
    </div>
    <div>
      <label for="comp">Favorite CSS Compiler</label>
      <select id="comp">
        <option value="sass">Sass</option>
        <option value="less">Less</option>
        <option value="stylus">Stylus</option>
        <option value="postcss">PostCSS</option>
        <option value="other">Other</option>
      </select>
    </div>
    <div>
      <fieldset>
        <legend>Are you familiar with CSS Grid?</legend>
        <input type="radio" name="grid" id="yes" value="yes" />
        <label for="yes">Yes</label>
        <input type="radio" name="grid" id="no" value="no" />
        <label for="no">No</label>
      </fieldset>
    </div>
    <div class="full-width">
      <label for="message">Message</label>
      <textarea id="message"></textarea>
    </div>
    <div class="full-width">
      <input type="checkbox" id="newsletter" />
      <label for="newsletter">Receive our newsletter?</label>
    </div>
    <div class="full-width">
      <button type="submit">Send Response</button>
      <button type="reset">Clear Form</button>
    </div>
  </form>
</main>
...

HTML 表单结构由相互连接的属性值组成，以便正确运行。 这段代码创建了一个表单，询问用户的姓名和电子邮件，询问他们最喜欢的 CSS 编译器，以及他们是否知道 CSS 网格，为用户生成的消息提供一个字段，并有一个复选框让用户注册新闻通讯. 要了解有关如何在 HTML 中构建表单的更多信息，请参阅 Mozilla Web 文档页面上的 Web 表单结构 。

确保将更改保存到 index.html，然后在同一目录中创建一个名为 styles.css 的新文件。

在文本编辑器中打开 styles.css。 该文件提供了浏览器将应用于 index.html 内容的样式。 将以下 CSS 代码添加到您的 styles.css 文件中：

样式.css 

body {
  margin: 0;
  background-color: hsl(0, 0%, 98%);
  color: #333;
  font: 100% / normal sans-serif;
}

main {
  margin: 0 auto;
  padding: 4rem 0;
  width: 90%;
  max-width: 60rem;
}

form {
  box-sizing: border-box;
  padding: 2rem;
  border-radius: 1rem;
  background-color: hsl(0, 0%, 100%);
  border: 4px solid hsl(0, 0%, 90%);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.full-width {
  grid-column: span 2;
}

body 和 main 元素选择器为整个页面创建了一些初始文本样式和布局。 form 元素选择器为整个表单容器创建样式，然后使用 grid-template-columns: 1fr 1fr; 定义由两列大小相等的 CSS 网格。 然后，gap: 2rem 提供网格中每行和列之间的 2rem 间距。 最后，.full-width 类选择器允许具有此类的容器在两列之间扩展，而不是停留在一列中。

将更改保存到 styles.css。 接下来，打开您选择的网络浏览器。 在浏览器中选择 File 菜单项，然后选择 Open 选项。 接下来，导航到您的项目文件夹并在浏览器中加载您的 index.html 文件。 下图演示了页面将如何在浏览器中呈现：

表单显示在浅灰色背景上的白色框中。 每个表单元素分散在网格中，前四项在两列之间交替，最后三项堆叠，跨越两列。 表单元素的默认样式与它们在 Firefox 中的样式相同； 每个浏览器对表单元素的样式都有不同的默认设置。

在本节中，您将设置使用表单元素所需的初始 HTML 和 CSS。 您还了解到每个浏览器都以不同的方式处理这些元素的样式。 在下一节中，您将使用 appearance 属性在所有浏览器中均衡表单元素的样式。

使用 appearance 属性重置表单样式

每个浏览器都以不同的方式处理表单元素的视觉样式。 这些元素的样式通常超出了 CSS 的初始功能，并遵循操作系统的美学或浏览器自己的设计语言。 为了为所有浏览器创建一致的样式，在本节中，您将使用 appearance 属性和其他属性来删除默认浏览器样式。

首先，在文本编辑器中打开 styles.css。 创建一个由 button、fieldset、input、legend、select 和 textarea 组成的新组选择器。 然后在选择器块内，将 appearance 属性设置为 none，如以下代码块中突出显示的那样：

样式.css 

...
button,
fieldset,
input,
legend,
select,
textarea {
  appearance: none;
}

appearance 属性是从表单元素中删除特殊样式的预期方式。 然而，由于这个属性的年龄和实现，大多数浏览器仍然需要在属性名称中添加供应商前缀。 供应商前缀 是附加到属性名称的特殊编码添加，作为特定浏览器的标识符。 对于 Chrome、Safari 以及 Edge 和 Opera 的最新版本，该前缀是 -webkit-。 Firefox 使用 -moz- 前缀。

使用供应商前缀时，将属性的供应商前缀版本放在首位并以非前缀版本结束是很重要的。 这样，仅支持前缀属性的旧浏览器将使用前缀，但同时支持前缀和非前缀版本的新浏览器将使用非前缀标准版本。 按照以下代码块的格式添加突出显示的前缀 appearance 属性：

样式.css 

legend,
fieldset,
select,
textarea,
input,
button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

将更改保存到 styles.css，然后在浏览器中打开 index.html。 appearance 属性移除了修饰样式，并采用了更简单的样式，如下图所示：

appearance 属性仅允许您更改特定于浏览器的样式。 appearance: none 属性值的最大变化是完全删除了单选按钮和复选框。 对于其余的表单元素，需要更多属性才能完全删除默认样式。 以下代码块中突出显示的 CSS 属性添加了必要的样式以删除默认样式：

样式.css 

...
button,
fieldset,
input,
legend,
select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  border: none;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

这个 CSS 移除了背景颜色并重置了盒子模型的参数。 并非所有这些样式都对所有元素都是必需的，但可以将这些重置样式分组到所有元素中。

将更改保存到 styles.css，然后在浏览器中刷新 index.html。 表单元素已经从页面上视觉上消失了，如下图所示：

在本节中，您使用 appearance 和其他属性从表单元素中完全删除默认样式。 您还使用了供应商前缀来适当地为将来的浏览器版本应用属性。 在下一节中，您将开始自定义表单域的视觉样式。

跨表单字段设置一致的样式

现在默认浏览器样式已被完全删除，您将在所有表单元素中应用一致的自定义美学。 这将涉及创建针对特定表单特征的各种组选择器以接收适当的样式。

首先，在文本编辑器中打开 styles.css。 然后，创建一个由 input、select 和 textarea 组成的组选择器。 从以下代码块添加突出显示的样式：

样式.css 

...
legend,
fieldset,
select,
textarea,
input,
button {
  ...
}

input,
select,
textarea {
  border: 2px solid #333;
  background-color: white;
  border-radius: 0.25rem;
}

这些样式在每个数据输入元素周围添加了 2px 深灰色边框，以及白色背景和圆角。

接下来，您将为其中包含文本的数据输入元素应用样式。 您将使用属性选择器根据 type 属性值指定要定位的 input 元素。 以下代码块中突出显示的 CSS 提供了必要元素的样式：

样式.css 

...
input,
textarea,
select {
  ...
}

input[type="text"],
input[type="email"],
select,
textarea {
  font: 1.25rem / 1.5 sans-serif;
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 0.5rem 0.75rem;
}

这些样式在所有元素中应用一致的字体大小和系列。 例如，<textarea> 元素不会从 body 元素继承字体设置。 display、box-sizing、width 和 padding 属性为这些数据输入元素中的每一个提供了一致的布局和结构。

将更改保存到 styles.css，然后在 Web 浏览器中打开 index.html。 如下图所示，字段周围现在有一个较粗的深灰色边框，并且 <select> 元素的文本现在要大得多：

接下来，除了您已经编写的广泛样式之外，还有两个元素需要一些特殊样式。 第一个是给 textarea 更多的高度，第二个是对 <select> 元素应用自定义下拉箭头。

返回到 styles.css 并添加一个 textarea 元素选择器。 在选择器块内，创建一个 min-height 属性设置为 10rem 的值。 这将为表单用户创建一个更大的初始区域来填写文本。 以下代码块中突出显示的 CSS 说明了它是如何编写的：

样式.css 

...
input[type="text"],
input[type="email"],
select,
textarea {
  ...
}

textarea {
  min-height: 10rem;
}

为 textarea 添加样式后，接下来要做的是创建一个 image 目录。 这可以通过在与 index.html 和 styles.css 文件相同的目录中在命令提示符下运行以下命令来完成： 

mkdir images

接下来，运行以下 curl 命令将您将使用的第一个图像下载到新的 images 目录中： 

curl -sL https://assets.digitalocean.com/articles/68129/down-arrow.svg -o images/down-arrow.svg

您下载的图像是 SVG，它是一种类似于 HTML 的标记语言，用于绘制形状。

要将此新图像添加到 <select> 元素，请返回到 styles.css。 然后，创建一个 select 元素选择器并添加一个具有以下代码块中突出显示的值的 background 属性：

样式.css 

...
textarea {
  min-height: 10rem;
}

select {
  background: url("images/down-arrow.svg") no-repeat center right 0.75rem;
}

此 background 属性将图像加载到 <select> 元素的背景中，并且不会重复图像。 然后它使用 center 将图像垂直居中，并使用 right 0.75rem 从右侧偏移它。

将更改保存到 styles.css，然后返回浏览器刷新页面。 <textarea> 现在大约是其原始高度的两倍，并且 <select> 元素在右侧有一个蓝色向下箭头。 下图说明了它是如何在浏览器中呈现的：

在本节中，您为表单的数据输入元素创建了自定义美学。 您还为 <select> 元素创建了一个背景来替换默认箭头。 在下一节中，您将创建自定义单选按钮和复选框，并在选中它们时应用选定状态。

使用 :checked 伪类自定义单选按钮和复选框

现在您已经创建了表单的基本美感，是时候将该视觉样式应用于单选按钮和复选框的交互式 input 项目了。

首先在文本编辑器中打开 styles.css。 您将使用 radio 或 checkbox 的 type 属性更改 input 元素，使其具有相等的高度和宽度值。 然后你会将单选按钮变成圆圈。 以下代码块的突出显示部分显示了它的格式：

样式.css 

...
select {
  ...
}

input[type="radio"],
input[type="checkbox"] {
  height: 1.5em;
  width: 1.5em;
  vertical-align: middle;
}

input[type="radio"] {
  border-radius: 50%;
}

vertical-align 属性用于对齐内联文本项。 通过将其设置为 middle，输入字段将位于文本对齐的中间。 然后，具有 50% 的 border-radius 属性的无线电输入将创建一个圆，因为 height 和 width 是相同的。

将更改保存到 styles.css，然后在浏览器中打开 index.html。 两个单选按钮和复选框现在更大且更明显，如下图所示：

如果您要与单选按钮或复选框进行交互，则不会发生任何可见的事情。 appearance 属性还会删除这些输入类型的选定指标。 接下来，您将使用 :checked 伪类选择器将样式应用于选定的输入项。

返回 styles.css 并使用 :checked 伪类为单选按钮输入创建一个新选择器。 然后，在选择器块中，添加一个 background-image 和一个 radial-gradient，以便可以将填充样式应用于选定的单选按钮。 以下代码块中突出显示的 CSS 显示了它的格式：

样式.css 

...
input[type="radio"] {
  border-radius: 50%;
}

input[type="radio"]:checked {
  background-image: radial-gradient(
    hsl(213, 73%, 50%) 40%,
    transparent calc(40% + 1px)
  );
}

calc() 函数允许在颜色值之后设置 transparent 属性 1px，在输入字段内创建一个实心蓝色圆圈。

保存对 styles.css 的更改，然后在浏览器中返回 index.html。 现在，单选按钮在输入内部有一个被白色包围的实心蓝色圆圈。 下图显示了选中的 Yes 单选按钮：

接下来，复选框将使用背景图像来指示其 :checked 状态，类似于 <select> 下拉菜单的箭头。

运行以下 curl 命令将复选标记图像下载到您的 images 目录： 

curl -sL https://assets.digitalocean.com/articles/68129/check.svg -o images/check.svg

现在您已下载并准备使用图像，请在文本编辑器中返回 styles.css。

接下来，添加一个带有 :checked 伪类的 input[type="checkbox"] 选择器。 在选择器块中，添加一个 background 属性，用于加载 check.svg 图像并将其缩小以适合框。 以下代码块中突出显示的 CSS 指示了它的编写方式：

stlyes.css 

...
input[type="radio"]:checked {
  ...
}

input[type="checkbox"]:checked {
  background: url('images/check.svg') no-repeat center / 75% auto;
}

background 属性值确保复选标记图像以容器为中心，不重复，并按比例缩小 75%。

保存对 styles.css 的更改，然后在浏览器中刷新页面。 选中 Receive our newsletter 复选框时，内部会出现一个复选标记，如下图所示：

在本节中，您创建了自定义单选按钮和输入字段，并通过使用 :checked 伪类使它们调整其选定状态。 在下一节中，您将为页面上的 <label> 和 <legend> 元素设置样式。

为标签和图例添加特殊样式

下一个要设置样式的元素是表单中的 <label> 和 <legend> 元素。 将使用两种不同的样式：单选按钮和复选框的小标签样式和其余元素的大标签样式。

在文本编辑器中打开 index.html。 您将为每个 <label> 和 <legend> 添加一个 class 属性，其值为 large-label 或 small-label，如下所示代码块：

索引.html 

...
<form>
  <div>
    <label for="name" class="large-label">Name</label>
    <input id="name" type="text" />
  </div>
  <div>
    <label for="email" class="large-label">Email</label>
    <input id="email" type="email" />
  </div>
  <div>
    <label for="comp" class="large-label">Favorite CSS Compiler</label>
    ...
  </div>
  <div>
    <fieldset>
      <legend class="large-label">Are you familiar with CSS Grid?</legend>
      <input type="radio" name="grid" id="yes" value="yes" />
      <label for="yes" class="small-label">Yes</label>
      <input type="radio" name="grid" id="no" value="no" />
      <label for="no" class="small-label">No</label>
    </fieldset>
  </div>
  <div class="full-width">
    <label for="message" class="large-label">Message</label>
    <textarea id="message"></textarea>
  </div>
  <div class="full-width">
    <input type="checkbox" id="newsletter" />
    <label for="newsletter" class="small-label">Receive our newsletter?</label>
  </div>
  ...
</form>
...

将这些添加保存到 index.html，然后在文本编辑器中打开 styles.css。

在 styles.css 中，添加一个 .large-label 类选择器并添加以下代码块中突出显示的以下属性：

样式.css 

...
.full-width {
  grid-column: span 2;
}

.large-label {
  display: inline-block;
  font: bold 1.5rem sans-serif;
  margin-bottom: 0.5rem;
}
...

这些样式将 large-label 元素设置为大而粗体，字体大小为 1.5rem，相当于 24px。 然后 margin-bottom 属性在标签与其对应物之间提供了一些空间。

将此更改保存到 styles.css 并在 Web 浏览器中打开 index.html。 数据输入字段上方的标签文本将大而粗体，如下图所示：

返回 styles.css 并为 .small-label 创建另一个类选择器。 由于这些是单选按钮或复选框右侧的标签，因此与 .large-label 相比，它们需要一些不同的间距和大小样式。 从以下代码块中将突出显示的 CSS 添加到您的 styles.css 中：

样式.css 

...
.large-label {
  display: inline-block;
  font: bold 1.5rem sans-serif;
  margin-bottom: 0.5rem;
}

.small-label {
  vertical-align: middle;
  display: inline-block;
  margin-left: 0.25rem;
  margin-right: 1.5rem;
  font: 1.25rem sans-serif;
}
...

vertical-align: middle 将稍微偏移文本。 字体设置为1.25rem，相当于20px，用sans-serif字体。 左侧和右侧的 margin 属性在输入字段和标签之间提供空间。

将更新保存到 styles.css 并在浏览器中刷新 index.html。 单选按钮和复选框旁边的标签现在更大并提供更多间距，如下图所示：

在本节中，您根据它们相对于输入值的位置为两种不同类型的标签创建了样式。 标签现在脱颖而出，在整个表单中提供更易读性和导航。 在下一节中，您将通过使用 placeholder 属性提供示例数据格式。

使用 ::placeholder 伪元素提供占位符内容

input 或 textarea 元素上的占位符内容为表单用户提供了所请求的信息类型以及如何格式化信息的可视化演示。 placeholder 属性被添加到 HTML 中，并带有一个描述它的值。 然后 ::placeholder 伪元素允许自定义文本的外观。

要开始制作占位符内容，请在文本编辑器中打开 index.html。 将 placeholder 属性添加到名称文本 <input />、电子邮件 <input /> 和 <textarea> 元素。 以下代码块中突出显示的 HTML 指示在何处添加 placeholder 和要使用的值：

索引.html 

...
<form>
  <div>
    <label for="name" class="large-label">Name</label>
    <input id="name" type="text" placeholder="First or Full Name" />
  </div>
  <div>
    <label for="email" class="large-label">Email</label>
    <input id="email" type="email" placeholder="name@example.com" />
  </div>
  ...
  <div class="full-width">
    <label for="message" class="large-label">Message</label>
    <textarea id="message" placeholder="Leave a message…"></textarea>
  </div>
  ...
</form>
...

将您的更改保存到 index.html，然后在 Web 浏览器中打开该页面。 这三个文本输入区域现在在其中包含内容。 选择这些文本输入字段并添加内容后，浏览器将删除占位符文本。 下图说明了默认占位符样式在浏览器中的显示方式：

要设置 placeholder 的样式，请在文本编辑器中打开 styles.css。 为 input::placeholder 和 textarea::placeholder 添加组选择器。 确保在选择器和伪元素之间使用双冒号，因为这是浏览器识别伪类和伪元素之间区别的方式。 以下代码块中突出显示的 CSS 显示了它的编写方式：

样式.css 

...
textarea {
  min-height: 10rem;
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* Firefox */
  color: hsl(213, 73%, 50%);
}

select {
  background: url("images/down-arrow.svg") no-repeat center right 0.75rem;
}
...

需要注意的一件事是 Firefox 需要将 opacity 值设置为 1 才能获得完整的颜色值。 否则 Firefox 会减少 opacity，使文本颜色变暗并根据颜色值导致可访问的颜色对比度问题。 因为这是仅 Firefox 的情况，所以有一个注释来解释 opacity 属性存在的目的。

将更改保存到 styles.css 并返回浏览器刷新 index.html。 占位符文本现在是用于下拉箭头和单选按钮和复选框的选定状态的相同蓝色。 下图说明了浏览器如何呈现 placeholder 内容：

在本节中，您在文本输入字段上创建了 placeholder 内容，并使用 ::placeholder 伪元素对它们进行了样式设置。 在下一节中，您将为表单 <button> 元素创建自定义样式。

创建交互式按钮样式

在 Web 表单中，<button> 元素通常用于提交或重置表单。 在 index.html 中，有两个按钮，一个是 submit 的 type，另一个是 reset。 两者在功能上都很有用，但执行相反的操作。 submit 按钮会将表单发送到处理器，而 reset 按钮会清除表单中所有输入的数据。 由于这些不同的操作，<button> 元素也需要看起来明显不同。

首先，在文本编辑器中打开 styles.css 并创建一个 button 元素选择器。 在此选择器块中，您将添加在 submit 和 reset <button> 元素之间共享的样式，如以下代码块中突出显示的那样：

样式.css 

...
input[type="checkbox"]:checked {
  background: url("images/check.svg") no-repeat center / 75% auto;
}

button {
  font: 1.25rem sans-serif;
  border-radius: 0.25rem;
  cursor: pointer;
  padding: 0.75rem 1.25rem;
}

font 将两个按钮设置为具有相同的字体样式和大小。 然后 border-radius 为两个按钮添加一个圆角。 cursor 属性将光标的样式更改为手形指针。 最后，padding 属性定义了按钮内部周围的空间。

将更改保存到 styles.css，然后在 Web 浏览器中打开 index.html。 按钮中的文本会变大，并且文本之间的间距会由于填充而在视觉上增加。 下图显示了按钮在浏览器中的呈现方式：

接下来，返回 styles.css 以使用针对每个按钮的属性选择器为每个按钮 type 添加样式。 对于 submit 按钮，添加蓝色 background-color 和 white 文本颜色。 reset 按钮将获得类似链接的下划线和 margin 以在按钮之间添加更多空间。 将以下代码块中突出显示的 CSS 添加到您的 styles.css 文件中：

样式.css 

...
button {
  ...
}

button[type="submit"] {
  background-color: hsl(213, 73%, 50%);
  color: white;
}

button[type="reset"] {
  text-decoration: underline;
  margin-left: 1rem;
}

将这些添加保存到 styles.css，然后在文本编辑器中刷新 index.html。 submit 按钮现在是突出的蓝色和白色，而 reset 是柔和的下划线文本，如下图所示：

<button> 元素默认没有 :hover 状态，因此您现在将其添加到您的样式中。 :hover 状态有助于帮助光标用户获得光标位于按钮上的视觉反馈。

要为这些 <button> 元素创建 :hover 状态，请在文本编辑器中返回 styles.css。 将 submit 按钮的 backgound-color 设置为在悬停时变暗。 然后，使 reset 按钮在悬停时去掉下划线。 以下代码块中突出显示的 HTML 指示如何编写这些样式：

样式.css 

...
button[type="submit"] {
  background-color: hsl(213, 73%, 50%);
  color: white;
}

button[type="submit"]:hover {
  background-color: hsl(213, 73%, 40%);
}

button[type="reset"] {
  text-decoration: underline;
  margin-left: 1rem;
}

button[type="reset"]:hover {
  text-decoration: none;
}

将更改保存到 styles.css，然后返回浏览器刷新 index.html。 如以下动画所示，当鼠标光标悬停在 <button> 元素上时，它们的样式会发生变化：

在本节中，您为 <button> 元素创建了样式，以使它们的差异在视觉上很明显。 您通过调整 cursor 属性更改了光标在悬停时的显示方式。 您还创建了自定义样式以应用于每个按钮以提供进一步的视觉反馈。 在最后一节中，当表单元素当前与 :focus 伪类一起使用时，您将通过创建样式来提供进一步的视觉活动反馈。

使用 :focus 澄清活动表单字段

填写表单时，用户了解他们当前正在处理的字段非常重要。 您可以使用 :focus 伪类来完成此操作。 默认情况下，浏览器使用 outline 属性来指示元素何时具有 :focus，但有时它可能不是一个明显的指示符，或者它可能与设计的其他视觉方面发生冲突。 在本节中，您将创建一个与表单美感相匹配的自定义 :focus 状态。

要开始使用表单域 :focus 状态，请在文本编辑器中打开 styles.css。 为 input、select 和 textarea 创建一个组选择器，它们都具有 :focus 伪类，如以下代码块中突出显示的那样：

样式.css 

...
input,
select,
textarea {
  ...
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  box-shadow: 0 0 0 4px hsl(213, 90%, 70%);
}

input[type="text"],
input[type="email"],
select,
textarea {
  ...
}
...

这些样式删除了浏览器默认的 outline 值，并将样式替换为使用 box-shadow 属性创建的粗蓝色笔触。 box-shadow 的前三个值用于阴影的位置和模糊量。 第四个称为展开，在这种情况下，它会在焦点元素周围创建 4px 笔划。

接下来，按钮将获得稍微不同的焦点状态，因为 submit 按钮是相同的蓝色。 焦点状态的目的和意图是为焦点元素带来明显的注意力，因此您将以不同的方式区分这些轮廓。

将 button:focus 选择器添加到 styles.css。 在选择器块中，禁用 outline 默认并添加 box-shadow 属性。 放置、模糊和散布值将与输入字段保持相同，但颜色将是黑色而不是蓝色，如以下代码块中突出显示的那样：

样式.css 

...
button {
  ...
}

button:focus {
  outline: none;
  box-shadow: 0 0 0 4px black;
}

button[type="submit"] {
  ...
}
...

将更改保存到 styles.css 并返回浏览器。 刷新 index.html 并开始点击 Tab 键，以便焦点在表单中的每个元素之间移动。 下面的动画展示了焦点样式是如何通过 Tab 键改变焦点的：

在本节中，您创建了焦点状态样式，当表单元素具有焦点时提供清晰的视觉反馈。 这种视觉样式对鼠标、触摸和键盘输入用户很有帮助。

结论

表单是网页设计的常见元素。 它们允许用户与应用程序交互、搜索内容并提供反馈。 在本教程中，您创建了一个完整的表单并设置了样式。 您使用 appearance 属性删除了浏览器默认样式，并在各种元素之间创建了一种新的自定义美学。 您使用了 :checked 伪类来为单选按钮和复选框设置选定状态。 然后添加 placeholder 内容并将样式与 ::placeholder 伪元素匹配。 创建自定义按钮样式后，您应用了 :focus 样式，为表单用户提供了有价值的视觉交互反馈。

如果您想阅读更多 CSS 教程，请尝试 如何使用 CSS 设置 HTML 样式系列 中的其他教程。

取自“https://cainiaojiaocheng.com/index.php?title=如何使用CSS设置常见表单元素的样式&oldid=27858”
Powered by MediaWiki