利用CSS3美化单选、复选按钮的显示样式

下面是关于如何利用 CSS3 美化单选、复选按钮的完整攻略。

攻略步骤

明确单选、复选按钮的 HTML 结构
单选、复选按钮都是通过 input 标签进行创建的，它们的类型分别是 radio 和 checkbox。同时，它们要实现美化，就需要隐藏原本的 input 元素，然后，借助CSS选择器等技术手段，改变该元素对应的 label 标签的样式。对于美化单选和复选按钮的方法非常类似，只是应用的属性略有不同。
设置 input 元素样式为透明
由于我们要自定义单选、复选按钮的样式，因此原本的 input 元素必须设置为透明或不可见，以便让 label 标签成为我们美化的主要对象。
通过 label 标签美化单选、复选按钮
美化单选、复选按钮，主要是通过改变其对应的 label 标签的样式来实现的。具体方法包括：设置 label 的 display 属性为 inline-block，使其成为块级元素；设置 label 的 width 和 height，以控制按钮的大小；设置 label 的 background 属性，使其显示按钮的背景图片；通过伪类 :checked，控制选中状态下按钮的样式等。
利用 CSS 选择器实现鼠标悬浮等效果
对于单选、复选按钮的效果，除了选中状态之外，我们还可以通过鼠标悬浮等特效增强用户交互感受。可以通过 CSS 选择器的伪类 :hover 实现按钮设置鼠标悬浮时的效果，例如改变按钮的背景颜色、添加阴影、实现简单的动画等等。

示例说明

示例1：美化单选按钮

对于单选按钮，我们可以使用以下 CSS 样式来美化其样式：

input[type="radio"] {
  display: none;
}

/* 自定义样式 */
input[type="radio"] + label {
  display: inline-block;
  width: 20px;
  height: 20px;
  cursor: pointer;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #000;
}

/* 选中样式 */
input[type="radio"]:checked + label {
  background-color: #f00;
}

在上述样式中，我们对 input[type="radio"] 设置了 display:none 让其消失，然后使用 label 标签实现显示和样式。具体样式设置如下：

设置 display: inline-block，以便让 label 标签成为块级元素。
设置 width 和 height，控制按钮的大小。
设置 cursor: pointer，当鼠标移动到单选按钮上时，显示指针。
设置 border-radius，将按钮样式设置为圆形。
设置 background 和 border 标签，用于显示和设置按钮样式。

同时，在 input[type="radio"] 被选中时，通过伪类 :checked 来改变按钮样式，例如改变背景颜色。

示例2：美化复选按钮

对于复选按钮，我们可以使用以下样式来美化其样式：

input[type="checkbox"] {
  display: none;
}

/* 自定义样式 */
input[type="checkbox"] + label {
  display: inline-block;
  width: 20px;
  height: 20px;
  cursor: pointer;
  border-radius: 5px;
  background: #fff;
  border: 1px solid #000;
}

/* 选中样式 */
input[type="checkbox"]:checked + label {
  background-color: #f00;
  background-image: url('path/to/checked.png');
}

在上述样式中，我们又对 input[type="checkbox"] 设置了 display:none 让其消失，然后使用 label 标签实现显示和样式。具体样式设置如下：