设置表单样式

帮助用户通过首选浏览器使用您的表单

为确保您的表单可供尽可能多的人访问，请使用为作业构建的元素：<input>、<textarea>、<select> 和 <button>。这是可用表单的基线。

默认浏览器样式不太好看！让我们来修改一下。

注意 ：渐进式增强是一种为尽可能多的用户提供基本内容和功能的基准策略。确保为现代浏览器的用户提供最佳体验。最后一步，您需要从内容入手，使用语义 HTML，添加可满足未来需求的 CSS，并在最后一步添加强大的 JavaScript。

确保所有人都能阅读表单控件

大多数浏览器中表单控件的默认字体大小过小。 为确保您的表单控件易于阅读，请使用 CSS 更改字体大小：

增加 font-size 和 line-height 以提高可读性。

.form-element {
  font-size: 1.3rem;
  line-height: 1.2;
}

注意 ：对于 font-size，请使用相对单位，例如 em（相对于元素父级的基本尺寸）或 rem（相对于文档的基本尺寸），以确保尺寸与用户偏好相符。用户可以更改基本 font-size，并且具有相对 font-size 的所有元素都会自动调整。对于 line-height，请使用无单位值（例如 1.5），以保持行高相对于字体大小。详细了解 CSS 中的像素与相对单位。

帮助用户浏览表单

下一步，更改表单的布局并增加表单元素的间距，以帮助用户了解哪些元素应归在一起。

margin CSS 属性用于增加元素之间的空间，而 padding 属性用于增加元素内容周围的空间。

对于一般布局，请使用 Flexbox 或 Grid。详细了解 CSS 布局方法。

确保表单控件看起来像表单控件

为您的表单控件使用易于理解的样式，让用户能够轻松填写表单。 例如，使用实线边框设置 <input> 元素的样式。

注意 ：在许多浏览器中，默认的 <input> 边框颜色太浅。对比不够明显可能会使元素难以辨认，尤其是在移动设备上。在 Android 设备上的 Chrome 中打开此演示版，查看默认样式。

input,
textarea {
  border: 1px solid;
}

帮助用户提交表单

考虑为 <button> 使用 background，使其与您的网站样式相匹配，并替换或移除默认的 border 样式。

注意 ：在现代浏览器中，您可以像设置任何其他元素一样设置 <button> 的样式，因此应始终使用语义 <button> 或 <input type="submit">。使用为作业构建的元素提供许多内置的易用性和无障碍功能优势，而使用 <div> 等通用元素时，这些优势是无法实现的。您将了解其他模块中的内置功能。详细了解如何还原 <button> 的默认样式。

帮助用户了解当前状态

浏览器会应用 :focus 的默认样式。您可以替换 :focus 的样式，使颜色与您的品牌相匹配。

button:focus {
    outline: 4px solid green;
}

注意 ：只有在您也添加了其他适当的焦点样式的情况下，才移除 :focus 上的 outline，以确保默认样式和焦点样式能够区分开。详细了解如何设计焦点指示标志。

检查您的掌握程度

检验您对样式表单的掌握情况

为什么应为 font-size 使用相对单位？

确保尺寸与用户偏好设置相符。

🎉

为了确保尺寸能够响应前一个元素。

再试一次！

为了确保尺寸能够响应深色模式，

再试一次！

确保尺寸能响应媒体查询。

再试一次！

如何增加表单控件之间的间距？

使用 padding CSS 属性。

再试一次！

使用 spacer CSS 属性。

再试一次！

使用 margin CSS 属性。

🎉

使用 boundary CSS 属性。

再试一次！

资源

• 了解 CSS
• CSS 布局方法
• 设计焦点指示标志
• 还原 <button> 的默认样式。