[分享]css两组单选按钮怎么写

CSS 中的单选按钮是一种常见的页面元素，它可以让用户在几个选项中选择一个选项。在使用 CSS 实现单选按钮时，有两种不同的方法可以选择。这篇文章将介绍如何使用 CSS 实现这两种单选按钮。第一种方...

CSS 中的单选按钮是一种常见的页面元素，它可以让用户在几个选项中选择一个选项。在使用 CSS 实现单选按钮时，有两种不同的方法可以选择。这篇文章将介绍如何使用 CSS 实现这两种单选按钮。

第一种方法：

这种方法使用了单选框的响应式布局方法，使其在不同设备上具有不同的样式。代码如下：

label {
    display: block;
    cursor: pointer;
    padding: 10px;
    background-color: #f0f0f0;
}

/*默认的单选按钮*/
input[type='radio'] {
    display: none;
}

/*选中时的样式*/
input[type='radio']:checked + label {
    background-color: #5c5c5c;
    color: #fff;
}

解释：

该代码中的第一部分使标签具有样式，使其可以具有鼠标悬停和点击特性。第二部分设置单选按钮的默认样式:将其隐藏，因为我们使用标签代替它们，这样可以让用户觉得他们正在与标签进行交互。第三部分，当选中单选按钮时，会应用另一个样式。这使得标签的颜色和字体颜色发生变化。

第二种方法：

这种方法使用多个 class 来为单选按钮添加样式，由于使用多个 class 名称，使得样式适用性更具特殊性。代码如下：

.radio {
    display: inline-block;
    margin-right: 10px;
    cursor: pointer;
}

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

.radio label {
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
}

.radio label:hover {
    background-color: #ccc;
}

.radio input[type='radio']:checked + label {
    background-color: #5c5c5c;
    color: #fff;
}

解释：

该代码中的第一部分是一个通用的类名称，用于设置单选按钮的基本样式。第二部分是对具体单选按钮进行设置的样式。第三部分，当选中单选按钮时，会应用另一个样式。与第一种方法一样，这使得标签的颜色和字体颜色发生变化。

这两种方法都可以实现好看的单选按钮，具体使用哪一种方法，还是要根据具体需求来决定。