更改按钮上的背景，仅使用CSS？ [英] Change background on button click, using CSS only?

问题描述

可以在按钮上更改背景颜色;

（例如：琐碎的JavaScript ）

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

HTML

 < label for =checkclass =btn btn-default>切换背景颜色< / label> 
< input type =checkboxid =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; 
} 
  

这使用相邻的兄弟选择器。

href =http://jsfiddle.net/eYgdm/ =noreferrer> http://jsfiddle.net/eYgdm/ （我添加了 * - 用户选择

浏览器支持

Chrome，Firefox [桌面和移动]（Gecko）≥1.0，Internet Explorer≥7，Opera≥9和Safari≥3
参考资料：属性选择器和相邻兄弟选择器

Is it possible to change the background color on button click; of the entire document, using only CSS and HTML5?

(e.g.: it's trivial in JavaScript)

解决方案

Based on the fiddle I posted in the comments I've modified it very slightly to use the Bootstrap button CSS.

Just include Bootstrap's CSS file then use the code below.

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;
}

This uses the adjacent sibling selector.

Here it is working: http://jsfiddle.net/eYgdm/ (I've added *-user-select: none; to prevent selection of the label text but it's not required for the label to work)

Browser support

Chrome, Firefox [Desktop & Mobile] (Gecko) ≥ 1.0, Internet Explorer ≥ 7, Opera ≥ 9 and Safari ≥ 3 References: Attribute selectors and Adjacent sibling selectors

这篇关于更改按钮上的背景，仅使用CSS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！