设置表单样式

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

为确保您的表单可供尽可能多的人访问，请使用 作业：<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 或网格。 详细了解 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> 的默认样式。