WordPress 终于为表单样式提供了 theme.json 支持。不过在热烈庆祝之前，需要提醒一下：目前支持的元素有限，仅限于文本输入框和选择下拉框。所以……也许只能小小庆祝一下。

自 theme.json 引入以来，表单样式支持一直是备受期待的功能。WordPress 6.9 中的这些变化是迈向完整解决方案的第一步，预计未来还会有更多迭代。

本文将引导你了解目前可以使用 theme.json 实现哪些样式，以及哪些仍需要自定义 CSS。

通过 theme.json 添加样式

WordPress 6.9 新增了两个可以通过 theme.json 设置样式的元素：

• select: 针对 <select> HTML 元素。
• textInput: 针对 <textarea> 和 <input> 元素，且其 type 属性为以下值之一：
  • email
  • number
  • password
  • search
  • text
  • tel
  • url

你必须在 theme.json 的 styles.elements 属性下定义元素样式。例如，以下是为选择框和文本输入框添加样式的位置：

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 3,
	"styles": {
		"elements": {
			"select": {},
			"textInput": {}
		}
	}
}

设置选择下拉框样式

WordPress 本身输出 <select> 元素的区块不多。要测试你的自定义样式，建议在编辑器中插入“分类列表”或“归档”区块。你可以在区块检查器中启用设置 → 显示为下拉列表选项，将它们输出为下拉框。

最终的目标是让这些区块在前端看起来像这样：

与 theme.json 中的其他元素一样，它支持全套样式选项。上图中的设计使用了自定义的边框、颜色、轮廓、阴影和间距属性。

将新的 select 元素添加到你的 theme.json 中，如下所示：

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 3,
	"styles": {
		"elements": {
			"select": {
				"border": {
					"color": "#d5dae2",
					"style": "solid",
					"width": "1px",
					"radius": "0.75rem"
				},
				"color": {
					"background": "#eceff2",
					"text": "#22272f"
				},
				"outline": {
					"color": "transparent",
					"offset": "2px",
					"style": "solid",
					"width": "2px"
				},
				"shadow": "0 10px 15px -3px #0000001A, 0 4px 6px -4px #0000001A",
				"spacing": {
					"padding": {
						"top": "var(--wp--preset--spacing--10)",
						"bottom": "var(--wp--preset--spacing--10)",
						"left": "var(--wp--preset--spacing--30)",
						"right": "var(--wp--preset--spacing--30)"
					}
				}
			}
		}
	}
}

当然，具体效果会根据你使用的主题而有所不同。一如既往，我鼓励使用预设值而不是硬编码的值。

上述代码为整个网站（包括第三方插件使用的）的 <select> HTML 元素添加了全局样式。不过，根据这些插件的样式，它们可能需要更新，以确保在 WordPress 6.9 发布后不会覆盖 theme.json 的样式。

设置文本输入框和文本域样式

设置文本输入框和文本域的样式更有趣一些，主要是因为 WordPress 有更多区块可以用来测试。在这个例子中，我展示的是评论表单区块，但这些样式同样适用于登录/登出、搜索以及任何包含 <input> 或 <textarea> 的第三方区块。

让我们尝试为文本输入框添加一些样式，使其看起来类似这样：

在这种情况下，textInput 的样式与 select 的样式完全相同。这对于使用 CSS 的人来说并不奇怪，因为这些元素通常共享样式。

将 textInput 的新代码添加到你的 theme.json：

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 3,
	"styles": {
		"elements": {
			"textInput": {
				"border": {
					"color": "#d5dae2",
					"style": "solid",
					"width": "1px",
					"radius": "0.75rem"
				},
				"color": {
					"background": "#eceff2",
					"text": "#22272f"
				},
				"outline": {
					"color": "transparent",
					"offset": "2px",
					"style": "solid",
					"width": "2px"
				},
				"shadow": "0 10px 15px -3px #0000001A, 0 4px 6px -4px #0000001A",
				"spacing": {
					"padding": {
						"top": "var(--wp--preset--spacing--10)",
						"bottom": "var(--wp--preset--spacing--10)",
						"left": "var(--wp--preset--spacing--30)",
						"right": "var(--wp--preset--spacing--30)"
					}
				}
			}
		}
	}
}

添加样式后，请测试一个显示输入框或文本域的区块。

用 CSS 填补空白

对于这个特定的设计，我有一些样式需要自定义 CSS。由于这些是全局样式，不绑定于任何单个区块，我将它们添加到了主题的 style.css 中。

如截图所示，我添加的自定义样式包括焦点轮廓、标签样式和插入光标颜色（即文本光标颜色）：

设置不受支持的属性样式

为文本输入框设置一个自定义的插入光标颜色是个不错的细节，可以使其与文本本身区分开来。插入光标是在文本字段中键入时闪烁的指示器。

要定位与 WordPress 相同的元素，请使用以下代码：

textarea,
input:where([type=email], [type=number], [type=password], [type=search], [type=text], [type=tel], [type=url]) {
	caret-color: #2770ce;
}

当然，你可以添加任何其他不受支持的属性。上面的代码添加了对 CSS caret-color 属性的支持。

添加焦点样式

因为 WordPress 在 theme.json 中不支持为其表单元素设置 CSS :focus 和其他伪类，所以你也必须通过自定义 CSS 来添加这些样式。

如果你还记得之前的内容，在 theme.json 中，选择框和文本输入框的 outline-color 都被定义为 transparent。理想情况下，当用户聚焦于一个元素时，这个颜色应该改变，以提供视觉反馈表明他们正在与之交互。

将以下代码添加到你的主题的 style.css 中，以在聚焦时改变轮廓颜色：

textarea:focus,
input:where([type=email], [type=number], [type=password], [type=search], [type=text], [type=tel], [type=url]):focus,
select:focus {
	outline-color: #2770ce;
}

添加额外的元素样式

由于 WordPress 6.9 仅支持文本输入框和选择框，这为未来支持更多元素留下了空间。在关于表单样式化的原始工单中，列出了许多你可能需要通过 CSS 设置样式的元素。

你可能最常需要处理的元素之一是 <label>。它是大多数其他表单元素的标准兄弟（或父）元素。

要实现截图中显示的自定义颜色和排版，请将此代码添加到你的主题的 style.css 文件中：

/* 基本标签样式 */
label {
	color:     #526277;
	font-size: 1rem;
}

/* 当标签紧邻或包裹复选框或单选按钮时重置样式 */
input[type="checkbox"] + label,
input[type="radio"] + label,
label:has(input[type="checkbox"], input[type="radio"]) {
	color:     inherit;
	font-size: inherit;
}

对于这些样式，你会注意到我特别重置了与复选框或单选按钮配对的标签样式。这些标签的设计通常与其他表单元素配对的标签不同。

当然，你需要的 CSS 属性会根据你使用的主题而有所不同，请根据你的需求进行定制。

延伸阅读

这只是表单元素样式化之旅的开始。虽然它还不是一个完整的集合，但这是一个受欢迎的迭代，我期待在 WordPress 7.0 及以后版本中看到更多支持。

要跟进未来的更新，我建议订阅这些 GitHub 工单：

• 考虑将表单元素添加到 theme.json 元素块
• 在 theme.json 中支持 ::placeholder CSS 伪元素
• WIP: 为 textinput 元素添加伪元素支持
• 全局样式 – 公开向 UI 添加更多“元素”的方法