单击按钮更改背景，仅使用 CSS？ [复制]答案

【问题标题】：Change background on button click, using CSS only? [duplicate]单击按钮更改背景，仅使用 CSS？ [复制]
【发布时间】：2013-10-08 23:35:15
【问题描述】：

button点击可以改变背景颜色吗？整个document，只使用CSS和HTML5？

（例如：it's trivial in JavaScript）

【问题讨论】：

css-tricks.com/almanac/properties/t/transition
stackoverflow.com/questions/12574668/… 不完全是您的问题，但答案（否 - 不幸的是）值得一读。
不，这是不可能的，因为 CSS 中没有“父”选择器。你可以做这样的事情：jsfiddle.net/6mTjF/1（我刚刚做了一个快速演示，展示了伪类如何与+结合以添加交互效果）
以@Joe 的评论为基础。 jsfiddle.net/bhlaird/6mTjF/2。我添加了一些邪恶的绝对定位并伪造了它。
@BarbaraLaird - 不错！我已经在您的基础上进行了改进，使其看起来就像是一个点击事件：jsfiddle.net/6mTjF/3 - 它使用 <label> 和一个隐藏的复选框。

标签： javascript jquery html css background-image

【解决方案1】：

基于我在 cmets 中发布的小提琴，我稍微修改了它以使用 Bootstrap 按钮 CSS。

只需包含 Bootstrap 的 CSS 文件，然后使用下面的代码。

HTML

<label for="check" class="btn btn-default">Toggle background colour</label>
<input type="checkbox" id="check" />
<div></div>

CSS

div {
    width: 100%;
    height: 100%;
    background: #5CB85C;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
label.btn {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2; 
}
input[type="checkbox"]{
    display: none;
}
input[type="checkbox"]:checked + div{
    background: #5BC0DE;
}

这使用adjacent sibling selector。

它正在工作：http://jsfiddle.net/eYgdm/（我添加了*-user-select: none; 以防止选择标签文本，但标签不需要它）

浏览器支持

Chrome、Firefox [桌面和移动] (Gecko) ≥ 1.0、Internet Explorer ≥ 7、Opera ≥ 9 和 Safari ≥ 3 参考：Attribute selectors 和 Adjacent sibling selectors

【讨论】：

我如何让它与多个按钮一起工作，每个按钮切换不同的颜色？ - jsfiddle.net/eYgdm/1

【解决方案2】：

你可以这样做——使用相邻的 css 选择器：

<button class="btn">button</button>
<div class="content"></div>

btn:active + .content{
    background: blue;
}

http://jsfiddle.net/JeffreyTaylor/g47Uh/

【讨论】：

有什么方法可以仅使用 CSS 将其持久化为 blue，还是 @frenchie 说的 100% 无一例外？
@AT: 有 :active, :hover, :checked ...但在 CSS 中没有 :clicked。最接近你会得到芭芭拉莱尔德所做的事情jsfiddle.net/6mTjF/3
感谢您的链接；很难将其绑定到按钮类（例如：来自 Twitter Bootstrap）

【解决方案3】：

不，CSS 中没有“点击然后做某事”的概念。

【讨论】：

【解决方案4】：

不幸的是，css 规则中没有回溯；对于 CSS 选择器，没有办法爬上元素的祖先。

【讨论】：

【解决方案5】：

您可以（ab？）使用 :target 选择器。这可能不适用于较旧的浏览器。这是我制作的一个超级简单的示例，它会在单击链接时切换背景。

这个概念是将 CSS 样式应用于目标元素。在下面的代码中，单击链接将定位到 body 的 ID，这将应用 body:target 中的样式（更改背景颜色）。

<html>
    <head>
        <style>
            body { background-color:#333; }
            body:target { background-color:#fff; }
        </style>
    </head>
    <body id="myBody">
        <a href="#myBody">Click</a>
    </body>
</html>

JSfiddle

【讨论】：

【解决方案6】：

有办法做到这一点：

.cc2:focus {
background-color: #19A3FF;}

:focus 基本上意味着当您单击具有 cc2 类的元素时，它会将其变为蓝色背景 :) 希望对您有所帮助。

【讨论】：