Pure.CSS 复选框和单选框

“pure-checkbox” 和 “pure-radio” 类名用于规范化和对齐复选框和单选按钮。

Pure CSS 中没有为复选框和单选按钮输入提供特定的布局。 但是，Pure CSS 类允许我们使用此类输入。 复选框和单选按钮使用下面列出的类。

• 复选框： pure-checkbox 类可以在 label 标签内使用，input 标签可以在 label 标签内使用，以使用复选框。
• 单选按钮： pure-radio 类可以在 label 标签内使用，input 标签可以在 label 标签内使用，以使用复选框。

语法

语法显示了表单的 label 中的 pure-checkbox 类。

或

语法显示了表单的 label 中的 pure-radio 类。

练习 Pure CSS 复选框和单选按钮

使用 pure CSS 创建 pure-checkbox 和 pure-radio 按钮的最佳方法

• 使用 HTML： 我们可以使用适当的 HTML 标签来获得功能和可访问性。
• 一致性：pure 样式类在所有平台和浏览器上的用户交互中一致使用。
• 交互功能： 我们可以验证自定义样式类，以通过用户交互选项操作表单。
• 保持可访问性： 确保屏幕阅读器可以通过使用适当的标签及其类来连接输入。

示例

示例描述了表单中的复选框和单选按钮。 我们可以看到单选按钮和复选框的组合在一个框架中。

示例 1

此示例中显示 Pure CSS 复选框。 我们可以使用复选框输入类型在表单中设置 pure-checkbox 类

输出

输出显示 pure css 的复选框

说明

• pure-checkbox 类用于表单的 label 标签中。
• 复选框类型用于表单输入标签中。
• 我们可以为单个问题选择多个选项。

示例 2

Pure CSS 单选按钮显示用于示例中的单个选项。

输出

输出显示 pure css 的单选按钮

说明

• pure-radio 类用于表单的 label 标签中。
• 单选类型用于表单的输入标签中。
• 我们可以从多个输入选项中选择单个选项。

示例 3

让我们以一个复选框和一个单选按钮为例。

输出

输出显示 pure css 的单选按钮

说明

• pure-radio 和 pure-checkbox 类同时用于 label 标签中。
• 单选和复选框类型用于选择输入标签选项。

示例 4

Pure CSS 单选按钮和复选框按钮显示用于示例中的单个问题。

输出

输出显示 pure css 的单选按钮

说明

• pure-radio 和 pure-checkbox 类与不同的 fieldset 标签一起用于 label 中。
• 复选框和单选类型与双选关键字一起使用。
• 默认情况下，pure-css 类在按钮中显示双选选项。
• 如果我们使用已选中的两个按钮，则单选按钮显示最后一个选中的选项，并避免了之前选中的选项。

结论

通过使用 pure CSS 创建 pure 复选框和单选按钮，我们可以对表单的组件保持完全控制，而无需使用 JavaScript。 它在每台机器上都提供一致性和视觉上吸引人的性能。

通过使用这些类，我们仅使用 HTML 和 CSS 就可以创建完全可操作、交互和可访问的 pure 表单元素。 此方法提供了更个性化的用户界面、更轻松的维护和改进的性能。 通过创建简单的表单或创新的在线应用程序，纯复选框和单选按钮将改善用户体验和网站设计。