css实现单选按钮变复选_快速提示：简单CSS3复选框和单选按钮

最新推荐文章于 2026-05-14 09:11:15 发布

翻译最新推荐文章于 2026-05-14 09:11:15 发布 · 599 阅读

标签

#css #java #html #python #js

本文介绍了如何使用CSS3不依赖JavaScript来改变单选按钮的外观，使其呈现复选框的效果。通过利用CSS3的伪选择器和相邻兄弟选择器，可以定位并样式化与输入元素关联的标签，实现自定义的表单UI设计。虽然这种方法在早期移动浏览器中可能存在兼容性问题，但它为表单元素的视觉呈现提供了无限可能性。

css实现单选按钮变复选

有没有想过如何设置复选框和单选按钮的样式，而没有JavaScript？感谢CSS3，您可以！这是我们将要构建的内容（注意：要了解如何使它们易于访问，请同时阅读本教程）：

如果您正在寻找一些可用于表单UI元素的图形，请查看Envato Elements中提供的UI工具包。否则，请喝杯咖啡，开始使用本教程！

1.了解过程

推荐读物： 必须记住的30个CSS选择器

对于已经对CSS能力充满信心并且只想朝着正确方向前进的那些人，以下是整个教程中最重要CSS行：

input[type="checkbox"]:checked + label {

}

现在，对于那些觉得您可能需要更多指导的人，不要害怕，请继续阅读！

好了，现在回到话题。我们到底要做什么？好吧，由于CSS3的小巧的:checked伪选择器，我们能够根据元素的已检查（或未检查）状态来定位其元素。然后，我们可以使用CSS2.1中的+相邻兄弟选择器来将元素直接定位到复选框或单选框之后，在我们的示例中为标签。

2.设置我们HTML

现在，我们首先创建HTML和CSS文件（或者您更喜欢处理样式）并开始工作。我假设您知道如何执行此操作，因此我们无需介入。

为了让您步入正轨，我只会在一个复选框上演示此技术，但是单选按钮的过程是相同的，并且包含在源代码中。

好吧，让我们开始吧，好吗？我们首先创建复选框输入，然后创建标签。

<input type="checkbox" />
<label>Styled Check Box</label>

现在，以防万一您对<label>元素不太了解，您必须连接输入和标签，以便通过标签与输入进行交互。这可以通过使用for=""和输入的ID来完成。

<input type="checkbox" id="c1" name="cc" />
<label for="c1">Check Box 1</label>

我还将在标签内添加<span> ，这比其他任何东西都更个人喜好，但是在步骤3中所有内容都会变得清晰。

3.我们在这里做什么：CSS

这就是乐趣的开始。我们要做的第一件事是隐藏整个复选框，这是整个教程的基础。

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

现在，我们可以为标签设置样式，更具体地说，可以设置标签内部的跨度。我这样做是为了使自己能够更好地控制复选框的确切位置。没有它，您可能会直接在标签中使用背景图像，并且放置它可能会变得困难。

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    background:url(check_radio_sheet.png) left top no-repeat;
}

好吧，让我快速解释一下。首先，请注意背景。我有一个小的精灵表，所以我要做的就是在此跨度上设置背景位置。跨度本身就是图纸中每个“精灵”的确切宽度和高度，因此可以轻松定义每种状态。

这是其余CSS，专门针对我的样式。这纯粹是出于美学目的，特定于我的品味或此设计。

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-2px 10px 0 0;
    vertical-align:middle;
    background:url(check_radio_sheet.png) left top no-repeat;
    cursor:pointer;
}

4.使之工作

没有太多的工作要做，所以让我们总结一下。您需要做的最后一件事是在检查输入时为元素提供状态，还可以选择在悬停时提供状态。这很简单，看看吧！

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-2px 10px 0 0;
    vertical-align:middle;
    background:url(check_radio_sheet.png) left top no-repeat;
    cursor:pointer;
}
input[type="checkbox"]:checked + label span {
    background:url(check_radio_sheet.png) -19px top no-repeat;
}

注意，因为我使用了一张精灵表，所以我要做的就是更改背景位置。还要注意，当您“选中”复选框/单选按钮时，为标签的跨度设置样式所需要做的就是使用CSS3 :checked伪选择器。