美化你的表单：使用 CSS3 样式定制单选框、复选框和开关按钮

一、了解单选框、复选框和开关按钮

在开始自定义样式之前，我们先来了解一下单选框、复选框和开关按钮这三种常见表单元素。

• 单选框：允许用户从一组选项中选择一个。
• 复选框：允许用户从一组选项中选择多个。
• 开关按钮：允许用户在两种状态之间切换。

二、使用 CSS3 美化单选框和复选框

1. 基本样式

input[type="radio"], input[type="checkbox"] {
  appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid #ccc;
  border-radius: 50%;
}

这个样式将隐藏浏览器默认的单选框和复选框样式，并使用 CSS3 样式进行自定义。

2. 自定义样式

现在，您可以根据自己的喜好自定义样式。例如，您可以更改边框颜色、背景颜色、大小或形状。

input[type="radio"] {
  background-color: #ff0000;
  border-color: #ff0000;
}

input[type="checkbox"] {
  background-color: #00ff00;
  border-color: #00ff00;
}

这样，单选框将变成红色的圆圈，复选框将变成绿色的方块。

三、使用 CSS3 美化开关按钮

1. 基本样式

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  border: 1px solid #ccc;
  border-radius: 17px;
}

.switch input {
  display: none;
}

.slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  border-radius: 17px;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  left: 2px;
  bottom: 2px;
  width: 30px;
  height: 30px;
  background-color: #fff;
  border-radius: 50%;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  transform: translateX(26px);
}

这个样式将创建一个基本的开关按钮。当按钮处于关闭状态时，滑块将位于左侧，背景颜色为灰色。当按钮处于打开状态时，滑块将位于右侧，背景颜色为蓝色。

2. 自定义样式

您可以根据自己的喜好自定义开关按钮的样式。例如，您可以更改滑块的颜色、形状或大小。

.slider {
  background-color: #ff0000;
}

.slider:before {
  background-color: #fff;
}

这样，开关按钮的滑块将变成红色的圆圈。

四、结语

通过本文，您已经学会了如何使用 CSS3 来美化单选框、复选框和开关按钮。这些样式可以帮助您创建更具吸引力、更符合品牌调性的表单。

希望本文对您有所帮助。如果您有任何问题，欢迎在评论区留言。