CSS 当输入框位于标签内时如何自定义复选框和单选框样式

在本文中，我们将介绍如何使用CSS自定义复选框和单选框的样式，尤其是当输入框位于标签内时。

阅读更多：CSS 教程

默认复选框和单选框样式

在HTML中，我们可以使用 <input> 元素创建复选框和单选框。当浏览器默认渲染这些输入框时，它们通常具有相同的外观：一个方框内有一个勾选标记的复选框，以及一个圆形内有一个点的单选框。

使用label元素包裹input元素

为了将输入框和相关标签连接起来，我们可以使用 <label> 元素，并使用 for 属性指定其对应的输入框的 id ：

<label for="checkbox">选择：</label>
<input type="checkbox" id="checkbox">

这样，当用户点击label标签时，就会触发关联的输入框，增加了用户体验。

CSS选择器和伪类

在CSS中，我们可以使用选择器和伪类来选择并自定义复选框和单选框的样式。

1. 选择复选框和单选框

首先，我们可以使用 input[type="checkbox"] 选择器和 input[type="radio"] 选择器来选择所有的复选框和单选框。例如：

input[type="checkbox"] {
  /* 样式 */
}

input[type="radio"] {
  /* 样式 */
}

2. 套用自定义样式

接下来，我们可以使用CSS属性来自定义复选框和单选框的样式。常见的属性包括 width、height、background-color、border 等等。例如，我们可以将复选框变为红色的圆形：

input[type="checkbox"] {
  width: 20px;
  height: 20px;
  background-color: red;
  border-radius: 50%;
}

注意，由于不同浏览器的默认样式可能有所不同，建议在自定义样式时考虑到浏览器的兼容性。

3. 使用伪类选择器来控制状态

复选框和单选框有三种可能的状态：选中、未选中和禁用。我们可以使用伪类选择器 :checked、:not(:checked) 和 :disabled 来选择相应的状态。例如，我们可以设置选中状态下的复选框样式：

input[type="checkbox"]:checked {
  background-color: green;
}

类似地，我们可以设置未选中状态下的样式或禁用状态下的样式。

示例

以下是一个示例代码，演示如何使用CSS自定义复选框和单选框的样式，并将输入框放置在标签内部：

<style>
  input[type="checkbox"] {
    width: 20px;
    height: 20px;
    background-color: red;
    border-radius: 50%;
  }

  input[type="checkbox"]:checked {
    background-color: green;
  }

  input[type="radio"] {
    width: 20px;
    height: 20px;
    background-color: blue;
    border-radius: 50%;
  }

  input[type="radio"]:checked {
    background-color: yellow;
  }
</style>

<label>
  <input type="checkbox">
  选项1
</label>

<label>
  <input type="checkbox">
  选项2
</label>

<label>
  <input type="radio" name="radio">
  选项A
</label>

<label>
  <input type="radio" name="radio">
  选项B
</label>

在上述示例中，我们使用CSS定义了红色的圆形复选框，点击时会变为绿色；同时也定义了蓝色的圆形单选框，选中时会变为黄色。