介绍
网页表单是网站设计中常见的元素，从简单的搜索表单字段到联系表单和复杂的数据过滤器不等。了解如何使用CSS来样式化和处理这些元素有助于提供更好的解决方案，并可以改善用户对您网站的体验。
本教程涵盖了创建和样式化一个向用户请求各种数据的网页表单。该表单将使用文本字段、单选按钮、复选框、下拉选择、文本区域以及提交和重置按钮。您将通过使用appearance属性重置样式，设置自己一致的表单样式，为文本字段添加占位符答案，并使用各种伪类和伪元素自定义单选按钮和复选框来创建和样式化此表单及其元素。
先决条件
- 使用CSS中的高级选择器查找并应用样式到HTML元素的经验。有关更多信息，请查看CSS中使用ID、Class和属性选择器选择HTML元素的方法教程。
- 了解CSS盒模型，您可以在CSS中使用盒模型的方法教程中找到相关内容。
- 熟悉CSS中的伪类。查看CSS中使用链接和按钮的状态伪类以获取简介。
- 将一个空的HTML文件保存在本地计算机上，命名为
index.html，您可以从文本编辑器和所选的网络浏览器中访问它。要开始，请查看我们的设置HTML项目的方法教程，并按照如何使用和理解HTML元素中的说明来在浏览器中查看您的HTML。如果您是HTML的新手，请尝试整个使用HTML构建网站的系列教程。
设置基本的HTML和CSS
在这个第一部分中，您将设置HTML和初始样式，您将在整个教程中使用这些样式。这个HTML将设置页面的框架，并创建您稍后将样式化的表单字段。
首先，打开您的编辑器中的index.html文件。然后，添加以下HTML以为文件提供基本结构：
包含在<head>元素中的元素使用<title>元素定义页面的名称，使用<link>元素定义加载样式表的位置。<meta>标签定义字符编码，并指示浏览器如何在小屏幕设备上显示网站。主表单内容将位于<body>和<main>标签内。
接下来，在<main>元素内部，创建一个<form>元素。在<form>内部，您将添加各种表单元素和<div>元素来帮助布局。在本教程中，从先前步骤的代码中添加额外的代码。将以下代码块中的突出显示的HTML添加到您的index.html文件中：
HTML表单结构由互连的属性值组成，以便正确地运作。此代码创建一个表单，询问用户的姓名和电子邮件，询问他们喜欢的CSS编译器以及是否了解CSS网格，提供一个用于用户生成消息的字段，并具有一个复选框以订阅用户的新闻通讯。要了解有关如何在HTML中构建表单的更多信息，请参阅Mozilla Web Docs页面上的web表单结构。
确保保存您对index.html的更改，然后在相同目录中创建一个名为styles.css的新文件。
打开您的文本编辑器中的styles.css文件。该文件提供了浏览器将应用于index.html内容的样式。将以下CSS代码添加到您的styles.css文件中：
选择器body和main创建了一些用于整个页面的初始文本样式和布局。选择器form创建了整个表单容器的样式，然后定义了一个由两个等大小列组成的CSS网格，使用grid-template-columns: 1fr 1fr;。然后，gap: 2rem为网格中的每一行和列提供了2rem的间距。最后，full-width类选择器允许具有此类的容器在两列之间延伸，而不是保持在一列中。
将更改保存到 styles.css 文件中。接下来，打开您选择的网络浏览器。在浏览器中选择 文件 菜单项，然后选择 打开 选项。接下来，导航到您的项目文件夹，并在浏览器中加载您的 index.html 文件。以下图片展示了页面在浏览器中的渲染效果：
表单显示在白色框中，位于浅灰色背景上。每个表单元素都分散在网格上，前四个项目在两列之间交替显示，最后三个项目叠放在一起，横跨两列。表单元素的默认样式与在 Firefox 中显示的样式相同；每个浏览器对表单元素的默认样式处理方式不同。
在本节中，您设置了与表单元素一起使用的初始 HTML 和 CSS。您还了解到每个浏览器以不同的方式处理这些元素的样式。在下一节中，您将使用 appearance 属性来统一所有浏览器中表单元素的样式。
使用 appearance 属性重置表单样式
每个浏览器都以不同的方式处理表单元素的视觉样式。通常，这些元素的样式超出了 CSS 的初始功能范围，并遵循操作系统或浏览器自身的设计语言美学。为了在所有浏览器中创建一致的样式，在本节中，您将使用 appearance 属性和其他属性来移除默认的浏览器样式。
首先，打开您的文本编辑器中的 styles.css。创建一个新的组选择器，包括 button、fieldset、input、legend、select 和 textarea。然后在选择器块内部，添加 appearance 属性设置为 none，如下面的代码块所示：
appearance 属性是删除表单元素的特殊样式的预期方法。然而，由于该属性的年龄和实现，大多数浏览器仍然需要在属性名称前添加厂商前缀。厂商前缀是特殊的编码附加到属性名称之前，作为特定浏览器的标识符。对于Chrome、Safari 和最近版本的Edge 和Opera，该前缀是-webkit-。Firefox 使用 -moz- 前缀。
在使用供应商前缀时，重要的是首先放置属性的供应商前缀版本，最后以非前缀版本结束。这样，只支持带前缀属性的旧版浏览器将使用前缀，但同时支持前缀和非前缀版本的新版浏览器将使用非前缀标准版本。将下面代码块中格式化为高亮显示的前缀appearance属性添加进去：
保存更改至styles.css，然后在浏览器中打开index.html。appearance属性已移除修饰样式，转为更简单的样式，如下图所示：
appearance属性只允许您更改特定于浏览器的样式。appearance: none属性值带来的最大变化是完全移除了单选按钮和复选框。对于其余的表单元素，需要几个附加属性来完全移除默认样式。在下面的代码块中，高亮显示的CSS属性添加了必要的样式来移除默认样式：
这些CSS移除了背景颜色并重置了盒模型的参数。并非所有这些样式对所有元素都是必需的，但是可以将这些重置样式分组应用于所有元素。
保存更改至styles.css，然后在浏览器中刷新index.html。表单元素已在页面中消失，如下图所示：
在这一部分，您使用appearance和附加属性完全移除了表单元素的默认样式。您还使用了供应商前缀来适当地对未来浏览器版本应用属性。在下一部分中，您将开始自定义表单字段的视觉样式。
在表单字段间设置一致的样式
现在默认的浏览器样式已经完全移除，您将为所有表单元素应用一致的自定义美学。这将涉及创建各种组选择器，以针对特定的表单特征来接收适当的样式。
首先，打开您的文本编辑器中的styles.css。然后，创建一个由input、select和textarea组成的组选择器。添加以下代码块中突出显示的样式：
这些样式在每个数据输入元素周围添加了一个2px深灰色边框，以及白色背景和圆角。
接下来，您将为包含文本的数据输入元素应用样式。您将使用属性选择器来指定基于其type属性值来定位哪些input元素。以下代码块中突出显示的CSS提供了所需元素的样式：
这些样式应用了一致的字体大小和字体族在所有元素上。例如，<textarea> 元素不会继承 body 元素的字体设置。 display、box-sizing、width 和 padding 属性为每个数据输入元素提供了一致的布局和结构。
保存对 styles.css 的更改，然后在 Web 浏览器中打开 index.html。如下图所示，字段现在具有更厚的深灰色边框，并且 <select> 元素的文本现在大得多：
接下来，有两个元素需要一些特殊的样式，除了你已经编写的广泛的样式之外。首先是给 textarea 增加更多的高度，第二个是给 <select> 元素应用自定义的下拉箭头。
返回到 styles.css 并添加一个 textarea 元素选择器。在选择器块内，创建一个 min-height 属性，设置为 10rem 的值。这将为表单用户提供更大的初始填写文本的区域。以下代码块中的突出显示的 CSS 说明了这是如何编写的：
添加了 textarea 的样式后，下一步要完成的事情是创建一个 image 目录。可以通过在命令提示符中从与 index.html 和 styles.css 文件相同的目录中运行以下命令来实现：
接下来，运行以下curl命令将第一个要处理的图像下载到新的images目录中：
您下载的图像是一个SVG，它是一种类似于HTML的标记语言，用于绘制形状。
要将此新图像添加到<select>元素中，请返回到styles.css。然后，创建一个select元素选择器，并添加一个background属性，其值来自以下代码块中的突出显示部分：
此background属性将图像加载到<select>元素的背景中，且不会重复出现该图像。然后，使用center将图像在垂直方向上居中，并使用right 0.75rem将其从右侧偏移。
保存对styles.css的更改，然后返回浏览器刷新页面。现在，<textarea>的高度大约是其原始高度的两倍，并且<select>元素右侧有一个蓝色向下箭头。以下图像说明了在浏览器中如何呈现此效果：
在本节中，您为表单的数据输入元素创建了自定义美学。您还为<select>元素创建了一个背景，以替换默认的箭头。在下一节中，您将创建自定义的单选按钮和复选框，并在选中时应用选中状态。
使用:checked伪类定制单选按钮和复选框
现在您已经创建了表单的基本外观，是时候将该视觉样式应用到单选按钮和复选框的交互式input项目中了。
首先在文本编辑器中打开styles.css。您将更改带有type属性为radio或checkbox的input元素，使其具有相等的高度和宽度值。然后您将把单选按钮变成圆形。以下代码块的突出部分显示了格式:
vertical-align属性用于对齐内联文本项。将其设置为middle，则输入字段将位于文本对齐的中间。然后，具有border-radius属性为50%的单选按钮将创建一个圆形，因为height和width相同。
保存对styles.css的更改，然后在浏览器中打开index.html。现在，两个单选按钮和复选框的大小更大，更显眼，如下图所示：
如果您与单选按钮或复选框交互，将不会发生任何可见变化。appearance属性还会移除这些类型输入的选定指示器。接下来，您将使用:checked伪类选择器来对选定的输入项应用样式。
返回styles.css并创建一个新的选择器，用于单选按钮输入，并带有:checked伪类。然后，在选择器块内，添加一个background-image，使用radial-gradient以便对选定的单选按钮应用填充样式。以下代码块中突出显示的CSS显示了这个格式:
calc()函数允许在颜色值之后设置transparent属性为1px，从而在输入字段内创建一个实心蓝色圆圈。
保存您对styles.css的更改，并返回到您浏览器中的index.html。现在，单选按钮内有一个由白色包围的实心蓝色圆圈。以下图片显示了选定的是单选按钮:
接下来，复选框将使用背景图片来指示其:checked状态，类似于<select>下拉箭头。
运行以下curl命令以下载复选标记图像到您的images目录:
现在您已经下载并准备好使用图像，请返回到您的文本编辑器中的styles.css。
接下来，添加一个带有:checked伪类的input[type="checkbox"]选择器。在选择器块中，添加一个background属性，加载check.svg图像并将其缩小以适应框内。以下代码块中突出显示的CSS指示了如何编写此内容：
background属性的值确保复选框图像居中于容器中，不重复，并按比例缩小75%。
将更改保存到styles.css然后在浏览器中刷新页面。选择接收我们的新闻通讯复选框时，现在会在内部显示一个复选标记，如下图所示：
在本节中，您创建了自定义单选按钮和输入字段，并通过使用:checked伪类使它们调整其选定状态。在下一节中，您将为页面上的<label>和<legend>元素设置样式。
为标签和标题添加特殊样式
接下来要样式化的元素是表单中的<label>和<legend>元素。将使用两种不同的样式：用于单选按钮和复选框的小标签样式以及用于其他元素的大标签样式。
打开你的文本编辑器中的index.html文件。你将在每个<label>和<legend>元素上添加一个class属性，值为large-label或small-label，如下代码块所示：
...
<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类选择器，并添加下面代码块中所示的属性：
这些样式将large-label元素设置为大号和加粗，字体大小为1.5rem，相当于24px。然后margin-bottom属性为标签和其对应元素之间提供了一些空间。
保存这个更改到styles.css，并在你的网络浏览器中打开index.html。数据输入字段上方的标签文本将会是大号和加粗的，如下图所示：
返回到styles.css，为.small-label创建另一个类选择器。由于这些标签位于单选按钮或复选框右侧，它们将需要一些不同的间距和大小样式。将下面代码块中所示的CSS添加到你的styles.css中：
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以及要使用的值的位置：
保存index.html的更改，然后在web浏览器中打开页面。这三个文本输入区现在内部有内容。一旦选择这些文本输入字段并添加内容，浏览器将删除占位符文本。以下图片说明了浏览器中默认占位符样式的外观：
为了样式化placeholder，请在文本编辑器中打开styles.css。添加input::placeholder和textarea::placeholder的组选择器。确保在选择器和伪元素之间使用双冒号，因为这是浏览器识别伪类和伪元素之间差异的方式。以下代码块中突出显示的CSS显示了这样的写法：
需要注意的一点是，Firefox需要将opacity值设置为1才能具有完整的颜色值。否则，Firefox会减少opacity，使文本颜色变暗，并根据颜色值引起可访问性颜色对比问题。由于这是仅限Firefox的情况，因此有一个注释解释了opacity属性的存在目的。
将更改保存到styles.css，然后返回浏览器刷新index.html。 占位符文本现在与用于下拉箭头和单选按钮以及复选框的选定状态的蓝色相同。 以下图片说明了浏览器如何呈现placeholder内容：
通过此部分，您在文本输入字段上创建了placeholder内容，并使用::placeholder伪元素进行了样式设置。 在下一节中，您将为表单<button>元素创建自定义样式。
创建交互式按钮样式
在Web表单中，<button>元素通常用于提交或重置表单。 在index.html中，有两个按钮，一个的type是submit，另一个是reset。 两者都具有功能性，但执行相反的操作。 submit按钮将表单发送到处理器，而reset按钮会清除表单中的所有输入数据。 由于这些不同的操作，<button>元素的外观也需要看起来不同。
要开始，请在文本编辑器中打开styles.css并创建一个button元素选择器。在这个选择器块中，您将添加在下面的代码块中突出显示的submit和reset<button>元素之间共享的样式：
font将两个按钮设置为具有相同的字体样式和大小。然后border-radius为两个按钮添加了圆角。cursor属性将光标样式更改为手型指针样式。最后，padding属性定义了按钮内部周围的空间。
保存您对styles.css的更改，然后在您的网络浏览器中打开index.html。由于填充，按钮中的文本将增长，文本之间的间距将在视觉上增加。以下图片显示了按钮在浏览器中的呈现：
接下来，返回styles.css，通过使用属性选择器来针对每个按钮type添加样式。对于submit按钮，添加蓝色background-color和white文本颜色。reset按钮将获得类似链接的下划线和margin以在按钮之间添加更多空间。将以下代码块中突出显示的CSS添加到您的styles.css文件中：
保存这些对styles.css的添加，然后在您的文本编辑器中刷新index.html。submit按钮现在是突出的蓝色和白色，而reset是暗淡的带有下划线的文本，如下图所示：
要为这些
保存对styles.css的更改，然后返回浏览器刷新index.html。正如以下动画所示，当鼠标悬停在它们上方时，
在本节中，您为
使用:focus清晰激活的表单字段
当填写表单时，用户知道他们当前正在操作的字段是非常重要的。您可以通过使用 :focus 伪类来实现这一点。默认情况下，浏览器使用 outline 属性来指示元素是否具有 :focus，但有时它可能不是一个明显的指示器，或者它可能与设计的其他视觉方面不协调。在这一部分，您将创建一个符合表单美学的自定义 :focus 状态。
要开始使用表单字段 :focus 状态，请在文本编辑器中打开 styles.css。创建一个组选择器，选择 input、select 和 textarea，都带有 :focus 伪类，如下面的代码块所示：
这些样式移除了浏览器默认的 outline 值，并用 box-shadow 属性替换样式，创建了一个粗蓝色描边。 box-shadow 的前三个值用于阴影的位置和模糊程度。第四个称为扩展，本例中创建了一个围绕焦点元素的 4px 描边。
接下来，按钮将接收稍微不同的焦点状态，因为 submit 按钮与相同的蓝色。焦点状态的目的和意图是引起注意力，因此您将以不同的方式区分这些轮廓。
将button:focus选择器添加到styles.css中。在选择器块中，禁用outline默认设置，并添加box-shadow属性。放置、模糊和扩展值将保持与输入字段相同，但颜色将为黑色而不是蓝色，如下面的代码块所示：
保存对styles.css的更改并返回到浏览器。刷新index.html，并开始使用Tab键使焦点在表单中的每个元素之间移动。以下动画显示了焦点随Tab键变化时应用的焦点样式：
在本节中，您创建了焦点状态样式，为表单元素在获得焦点时提供清晰的视觉反馈。这种视觉样式对于鼠标、触摸和键盘输入用户都很有帮助。
结论
表单是网页设计的常见元素。它们允许用户与应用程序交互，搜索内容，并提供反馈。在本教程中，您创建并设计了一个完整的表单。您使用appearance属性去除了浏览器的默认样式，并在各种元素之间创建了新的自定义美学。您使用了:checked伪类为单选按钮和复选框创建了选中状态。然后，您添加了placeholder内容，并使用::placeholder伪元素匹配样式。在创建自定义按钮样式后，您应用了:focus样式，为表单用户提供了有价值的视觉交互反馈。
如果您想阅读更多CSS教程，请尝试如何使用CSS系列为HTML添加样式中的其他教程。
Source:
https://www.digitalocean.com/community/tutorials/how-to-style-common-form-elements-with-css