极客玩家必看 | 独立、独行、极致：纯CSS3赋予单选/多选框酷炫外观

前端

2024-01-03 02:00:07

在前端开发中，我们不可避免地需要对默认的元素样式进行修改。然而，某些元素的样式却不容易找到对应的设置选项。其中一个典型例子就是单选框（）和复选框（）。

在本文中，我们将重点探讨如何使用纯CSS3代码修改单选框和复选框的样式，让它们告别单调、陈旧的默认外观，赋予它们更美观、更符合网站设计风格的外观。

1. 初探单选框和复选框

单选框和复选框是网页表单中必不可少的元素。单选框用于在多个选项中选择一个，而复选框用于在多个选项中选择多个。

它们通常以小方框的形式出现，选中时，方框内部会出现一个对勾或叉号，以示区别。

2. 挖掘CSS3的潜能

CSS3作为CSS的最新版本，为我们提供了更多强大的样式定制能力。利用CSS3，我们可以轻松地修改单选框和复选框的外观。

例如，我们可以通过修改背景色、边框样式、圆角半径等属性，让单选框和复选框看起来更美观。

3. 实践出真知：动手修改样式

下面，我们以一个实际例子来演示如何使用CSS3代码修改单选框和复选框的样式。

首先，我们需要在HTML代码中添加单选框和复选框元素。

<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女

<input type="checkbox" name="hobby" value="sports"> 运动
<input type="checkbox" name="hobby" value="music"> 音乐
<input type="checkbox" name="hobby" value="reading"> 阅读

然后，我们在CSS样式表中添加以下代码：

/* 单选框样式 */
input[type="radio"] {
  width: 20px;
  height: 20px;
  border: 1px solid #ccc;
  border-radius: 50%;
  background-color: #fff;
}

/* 单选框选中时样式 */
input[type="radio"]:checked {
  background-color: #0099ff;
}

/* 复选框样式 */
input[type="checkbox"] {
  width: 20px;
  height: 20px;
  border: 1px solid #ccc;
  border-radius: 3px;
  background-color: #fff;
}

/* 复选框选中时样式 */
input[type="checkbox"]:checked {
  background-color: #0099ff;
}

保存代码并刷新页面，即可看到单选框和复选框已经拥有了新的样式。

4. 更进一步：添加自定义图标

为了让单选框和复选框看起来更生动，我们可以添加自定义图标。

这里，我们使用Font Awesome图标库来添加图标。

首先，在HTML代码中添加Font Awesome图标库的引用：

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" rel="stylesheet">

然后，我们在CSS样式表中添加以下代码：

/* 单选框选中时图标样式 */
input[type="radio"]:checked::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-size: 16px;
  color: #fff;
}

/* 复选框选中时图标样式 */
input[type="checkbox"]:checked::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-size: 16px;
  color: #fff;
}