如何使用 CSS 为常见表单元素设计样式

作者选择了 多样性在技术基金作为 写给捐款计划的一部分接受捐款。

介绍

网页表单是网站设计的一个常见元素,其复杂性从搜索表单字段到联系表单和复杂的数据过滤,知道如何使用CSS来设计和使用这些元素有助于为这些日常问题提供更好的解决方案,并可以改善您的网站的用户体验。

本教程涵盖创建和样式的网页表格,请求用户的各种数据。该表单将使用文本字段,无线电按钮,检查框,下载选项,文本区域,并提交和重置按钮。你将创建和样式这个表单及其元素 通过重置风格与外观属性,为表单设置自己的一致的风格,添加空间对文本字段的答案,并自定义无线电按钮和检查框与各种假名类和假名元素。

前提条件

建立基本的HTML和CSS

在这个第一个部分,你将设置的HTML和初始风格,你将工作在整个教程的剩余时间。

首先,在您的编辑器中打开 index.html 文件,然后添加以下 HTML 来为该文件提供基础结构:

 1[label index.html]
 2<!doctype html>
 3<html>
 4  <head>
 5    <meta charset="utf-8">
 6    <meta name="viewport" content="width=device-width, initial-scale=1">
 7    <title>CSS Form</title>
 8    <link rel="stylesheet" href="styles.css" />
 9  </head>
10  <body>
11    <main>
12    </main>
13  </body>
14</html>

包含在<head>元素中的元素定义了页面名称与<title>元素以及通过<link>元素加载风格表的位置。<meta>标签定义了字符编码,并指示浏览器如何在小屏幕设备上显示网站。

接下来,在<main>元素中,创建一个<form>元素。在<form>中,你会添加各种表单元素和<div>元素来帮助布局。在本教程中,从以前的步骤中提到代码的添加。

 1[label index.html]
 2...
 3<main>
 4  <form>
 5    <div>
 6      <label for="name">Name</label>
 7      <input id="name" type="text" />
 8    </div>
 9    <div>
10      <label for="email">Email</label>
11      <input id="email" type="email" />
12    </div>
13    <div>
14      <label for="comp">Favorite CSS Compiler</label>
15      <select id="comp">
16        <option value="sass">Sass</option>
17        <option value="less">Less</option>
18        <option value="stylus">Stylus</option>
19        <option value="postcss">PostCSS</option>
20        <option value="other">Other</option>
21      </select>
22    </div>
23    <div>
24      <fieldset>
25        <legend>Are you familiar with CSS Grid?</legend>
26        <input type="radio" name="grid" id="yes" value="yes" />
27        <label for="yes">Yes</label>
28        <input type="radio" name="grid" id="no" value="no" />
29        <label for="no">No</label>
30      </fieldset>
31    </div>
32    <div class="full-width">
33      <label for="message">Message</label>
34      <textarea id="message"></textarea>
35    </div>
36    <div class="full-width">
37      <input type="checkbox" id="newsletter" />
38      <label for="newsletter">Receive our newsletter?</label>
39    </div>
40    <div class="full-width">
41      <button type="submit">Send Response</button>
42      <button type="reset">Clear Form</button>
43    </div>
44  </form>
45</main>
46...

HTML 表单结构由相互连接的属性值组成,以便正确运作. 此代码创建了一个表单,该表单要求用户提供他们的姓名和电子邮件,要求他们最喜欢的 CSS 编译器,如果他们知道 CSS 网格,为用户生成的消息提供一个字段,并有一个检查框,以便用户注册新闻稿。

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

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

 1[label styles.css]
 2body {
 3  margin: 0;
 4  background-color: hsl(0, 0%, 98%);
 5  color: #333;
 6  font: 100% / normal sans-serif;
 7}
 8
 9main {
10  margin: 0 auto;
11  padding: 4rem 0;
12  width: 90%;
13  max-width: 60rem;
14}
15
16form {
17  box-sizing: border-box;
18  padding: 2rem;
19  border-radius: 1rem;
20  background-color: hsl(0, 0%, 100%);
21  border: 4px solid hsl(0, 0%, 90%);
22  display: grid;
23  grid-template-columns: 1fr 1fr;
24  gap: 2rem;
25}
26
27.full-width {
28  grid-column: span 2;
29}

体和主元素选择器为整个页面创建了一些初始的文本样式和布局。形式元素选择器创建了整体表单容器的样式,然后定义了一个 CSS 网格,由两个相同大小的列组成,其中有网格模板列: 1fr 1fr;。

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

Rounded white rectangle with a medium gray border on a light gray background. Several form field elements are in the white rectangle with black sans-serif labels.

表单显示在白色框中,以轻灰色背景。每个表单元素分散在网格中,前四个元素在两个列之间交替,最后三个元素堆积,覆盖两个列。

在本节中,您设置了与表单元素工作所需的初始HTML和CSS,您还了解到每个浏览器以不同的方式处理这些元素的样式。

使用外观属性重置形式样式

每个浏览器以不同的方式处理形式元素的视觉样式。通常,这些元素的样式超出CSS的初始能力,并遵循操作系统的美学或浏览器的设计语言。

首先,在文本编辑器中打开styles.css。 创建一个由按钮、fieldset、input、legend、select和textarea组成的新组选择器。 然后在选择器块中,将外观属性设置为没有,如下代码块所示:

 1[label styles.css]
 2...
 3button,
 4fieldset,
 5input,
 6legend,
 7select,
 8textarea {
 9  appearance: none;
10}

由于这个属性的年龄和实施,大多数浏览器仍然需要添加到属性名称的供应商前缀。 vendor prefix 是将属性名称作为特定浏览器的标识符的特殊编码添加。 对于 Chrome, Safari,以及最近版本的 Edge和 Opera,这个前缀是 -webkit-。

在使用供应商前缀时,重要的是先将一个属性的供应商前缀版本放置到非前缀版本中,以此方式,只支持前缀属性的旧浏览器将使用前缀,但支持前缀和非前缀版本的新浏览器将使用非前缀标准版本。

 1[label styles.css]
 2legend,
 3fieldset,
 4select,
 5textarea,
 6input,
 7button {
 8  -webkit-appearance: none;
 9  -moz-appearance: none;
10  appearance: none;
11}

将您的更改保存到styles.css,然后在您的浏览器中打开index.html。外观属性已经移除了装饰的风格,并转向了一个更简单的风格,如下图像所示:

Form elements with dark gray borders and middle gray borders creating depth effects.

外观属性只允许您更改浏览器特定的样式。 最大变更的外观:没有属性值是完全删除无线电按钮和检查框。 对于其他表单元素,需要一些属性来完全删除默认样式。 下列代码块中突出的 CSS 属性添加必要的样式来删除默认样式:

 1[label styles.css]
 2...
 3button,
 4fieldset,
 5input,
 6legend,
 7select,
 8textarea {
 9  -webkit-appearance: none;
10  -moz-appearance: none;
11  appearance: none;
12  background-color: transparent;
13  border: none;
14  padding: 0;
15  margin: 0;
16  box-sizing: border-box;
17}

此 CSS 删除背景颜色并重置框模型的参数. 并非所有这些风格对所有元素都是必要的,但可以将这些重置风格在所有元素中组合起来。

将您的更改保存到 styles.css,然后在浏览器中更新 `index.html。 表单元素从页面上视觉上消失了,如下图像所示:

Black, sans-serif text in a white rectangle on a gray background.

在本节中,您使用了外观和额外的属性,从表单元素中完全删除默认样式。您还使用供应商前缀,以适当的顺序适用于未来的浏览器版本的属性。

通过形状字段设置一致的风格

现在默认浏览器风格已经完全删除,您将应用一致的自定义美学在所有表单元素中。

首先,在文本编辑器中打开styles.css,然后创建一个组选择器,其中包括输入,选择和textarea。

 1[label styles.css]
 2...
 3legend,
 4fieldset,
 5select,
 6textarea,
 7input,
 8button {
 9  ...
10}
11
12input,
13select,
14textarea {
15  border: 2px solid #333;
16  background-color: white;
17  border-radius: 0.25rem;
18}

这些样式在每个数据输入元素周围添加一个2px暗灰色边界,以及白色背景和圆形角落。

接下来,您将为包含文本的数据输入元素应用风格。 您将使用属性选择器来指定根据其类型属性值来目标哪个输入元素。

 1[label styles.css]
 2...
 3input,
 4textarea,
 5select {
 6  ...
 7}
 8
 9input[type="text"],
10input[type="email"],
11select,
12textarea {
13  font: 1.25rem / 1.5 sans-serif;
14  display: block;
15  box-sizing: border-box;
16  width: 100%;
17  padding: 0.5rem 0.75rem;
18}

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

将您的更改保存到styles.css,然后在您的 Web 浏览器中打开index.html。如下图像所示,这些字段现在围绕它们有一个更厚的灰色边界,而<select>元素的文本现在要大得多:

Black, sans-serif text in a white rectangle on a gray background wth dark gray outline rectangles.

接下来,还有两个元素需要一些特殊的样式,除了你已经写的广泛的样式之外,第一个是给textarea更多的高度,第二个是将定制的下落箭头应用到<select>元素。

返回styles.css并添加一个textarea元素选择器。在选择器块中,创建一个min-height属性设置为10rem。这将为表单用户填写文本创建一个更大的初始区域。

 1[label styles.css]
 2...
 3input[type="text"],
 4input[type="email"],
 5select,
 6textarea {
 7  ...
 8}
 9
10textarea {
11  min-height: 10rem;
12}

添加textarea的样式后,下一步要做的是创建一个image目录,您可以在命令提示中从同一个目录中运行以下操作,如您的index.html和styles.css文件:

1mkdir images

接下来,运行下面的弯曲命令,将您要使用的第一个图像下载到新的图像目录中:

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

您下载的图像是一个 SVG,这是一个类似于HTML的标记语言,用于绘制形状。

若要将此新图像添加到<select>元素中,请返回styles.css。 然后,创建一个select元素选择器,并添加一个背景属性,其中有以下代码块中的突出值:

1[label styles.css]
2...
3textarea {
4  min-height: 10rem;
5}
6
7select {
8  background: url("images/down-arrow.svg") no-repeat center right 0.75rem;
9}

此背景属性将图像加载到选择元素的背景,而不会重复图像,然后将图像垂直中心为中心,并从右侧以右 0.75rem来抵消。

将您的更改保存到 styles.css,然后返回您的浏览器以更新页面. <textarea> 现在大约是其原始高度的两倍,而 <select> 元素在右侧有蓝色向下箭头。

Black, sans-serif text in a white rectangle on a gray background with dark gray outline rectangles, one of which has a blue downward arrow.

在本节中,您为表单中的数据输入元素创建了自定义美观。您还为<选择>元素创建了背景,以取代默认箭头。

定制无线电按钮和检查框使用:检查伪类

现在你已经创建了表单的基本美学,是时候将这种视觉风格应用到无线电按钮和检查框的交互式输入项目。

首先,在文本编辑器中打开styles.css。你会用radio或checkbox的type属性更改input元素,以达到相同的高度和宽度值。

 1[label styles.css]
 2...
 3select {
 4  ...
 5}
 6
 7input[type="radio"],
 8input[type="checkbox"] {
 9  height: 1.5em;
10  width: 1.5em;
11  vertical-align: middle;
12}
13
14input[type="radio"] {
15  border-radius: 50%;
16}

垂直对齐属性用于对齐线文本项目. 将此设置为中间,输入字段将位于文本对齐的中间。

将您的更改保存到styles.css,然后在浏览器中打开index.html。两个无线电按钮和检查框现在更大,更明显,如下图像所示:

Two circles with black sans-serif text and a rounded square with black sans-serif text.

如果您要与无线电按钮或检查框进行交互,不会发生任何可见的事件。外观属性还会删除这些类型的输入选定的指标。

返回‘styles.css’并创建一个新的选择器,以便输入无线电按钮的名称为‘:checked’。然后,在选择器块内,添加一个具有‘radial-gradient’的‘背景图像’,以便在选定的无线电按钮中应用一个填写式的样式。

 1[label styles.css]
 2...
 3input[type="radio"] {
 4  border-radius: 50%;
 5}
 6
 7input[type="radio"]:checked {
 8  background-image: radial-gradient(
 9    hsl(213, 73%, 50%) 40%,
10    transparent calc(40% + 1px)
11  );
12}

calc()函数允许在颜色值后设置透明属性为1px,在输入字段中创建一个坚固的蓝色圆圈。

将您的更改保存到styles.css并返回您的浏览器中的index.html。 无线电按钮现在有一个坚固的蓝色圆圈,在输入中包含白色。

Two circles with black sans-serif text and a rounded square with black sans-serif text. One circle has a blue circle inside.

接下来,检查框将使用背景图像来表示其 : checked’ 状态,类似于