CSS Checkbox Size

复选框允许用户从所需功能的多个选项中进行选择。当它应用于选项时，它显示为一个标记或勾选的方框。复选框允许用户在用户表单中同时选择多个选项。本文将探讨两种改变或设置复选框大小的方法。

设置复选框大小的方法

以下是设置或更改复选框大小的方法。我们可以为复选框元素设置 CSS 属性。

• 使用 CSS 中的 width 和 height 属性
• 使用 transform 属性

使用 CSS 中的 Width 和 Height 属性

CSS 的 height 和 width 属性用于设置复选框的大小。可以使用 height 和 width 属性分别调整复选框的高度和宽度。对于方形复选框，我们可以设置相同的高度和宽度。

语法

以下语法使用 height 和 width 属性设置复选框大小。

示例

以下示例显示了网页所需的复选框大小。使用 CSS 中的 hover 效果后，复选框大小也会改变。

示例 1

以下示例显示了网页上所需的 CSS 复选框大小。我们可以设置复选框元素的高度和宽度。

输出

输出显示了 CSS 复选框的大小。

示例 2

以下示例显示了带有 hover 效果的 CSS 复选框大小。在 hover 效果之后，我们可以设置复选框元素的高度和宽度。

输出

输出显示了 CSS 复选框的大小。

使用 Transform 属性

transform 属性对于修改复选框至关重要。scale 可以根据复选框 input 标签的高度、宽度、margin 和 padding 的大小进行缩放。

语法

以下语法使用 transform 属性设置复选框大小。

示例

以下示例展示了如何根据网页需求，使用 transform 属性设置复选框大小。我们可以看到 transform 属性及其值对复选框大小的影响。

示例 1

该示例显示了复选框的大小、margin 和 padding。我们可以使用 scale 设置 transform 属性。

输出

输出显示了 CSS 复选框的大小。

示例 2

该示例显示了 hover 效果后复选框的大小、margin 和 padding。在鼠标指针或移动之后，我们可以使用 scale 设置 transform 属性。

输出

输出显示了 CSS 复选框的大小。

结论

CSS 复选框大小用于在网页上显示复选框的大小。它用于使用 CSS 属性在 HTML 表单中创建吸引人、优雅且引人注目的复选框。