CSS 复选框样式

复选框是一个 HTML 元素，用于从用户那里获取输入。样式化复选框很难，但伪元素可以更轻松地样式化复选框。

这个 HTML 元素通常在每个网站上使用，但如果不进行样式化，它们在每个网站上看起来都相似。因此，样式化它们将使我们的网站与众不同且具有吸引力。我们需要隐藏原始复选框才能样式化复选框。使用 CSS 样式化复选框是一项有趣且富有创意的任务，可以为默认复选框带来新的且吸引人的外观。

CSS 复选框样式的示例

通过一些插图可以清楚地说明复选框的样式。让我们来看一些相关的插图。

示例 1

在这个例子中，我们使用了“~”，即兄弟选择器。它会选择所有位于前一个选择器之后的元素。我们还使用了伪类 **:hover** 来在用户将光标悬停在复选框上时为其设置样式。

代码

输出

示例 2

现在，我们将看到另一个样式化复选框的示例。在此示例中，我们将看到涟漪效果，这使得复选框更具吸引力。这种效果为复选框带来了新的外观。与上面的示例一样，我们也使用了“~”兄弟选择器，它会选择位于前一个选择器之前的元素。还使用了 :checked、:before、:after 等伪类。

请看以下示例，使用 CSS 为复选框创建涟漪效果。

代码

输出

选中复选框时，会显示涟漪效果。

示例 3

我们将看到以下示例，使用 CSS 为其创建填充方框复选框设计。

代码

输出

示例 4

在此示例中，我们将创建一个滑块复选框。

代码

输出

输出显示了一个滑块复选框。

示例 5

在此示例中，我们将在圆形复选框中创建一个勾选标记。

代码

输出

输出显示了一个圆形复选框中的勾选标记。

示例 6

在此示例中，我们将构建一个带有“是”或“否”选项的开关复选框。

代码

输出

输出显示了一个带有“是”或“否”选项的开关复选框。

结论

在本文中，我们已经了解了 CSS 复选框样式。我们学习了如何样式化复选框，例如方框复选框中的勾选标记、涟漪效果复选框、圆形复选框中的勾选标记、开关复选框和滑块复选框。我们可以使用 CSS 创建更多自定义复选框。