发表新帖
发表新帖

Change background on button click, using CSS only?

前端 未结
关注
6 2100
囚心锁ツ
囚心锁ツ 2020-12-03 12:05

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 Ja

相关标签:
6条回答
  • 感情败类
    2020-12-03 12:35

    Unfortunately, there's no backtracing in css rules; for a css selecter, there's no way to climb up an element's ancestors.

    0 讨论(0)
  • 误落风尘
    2020-12-03 12:43

    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

    0 讨论(0)
  • 旧时难觅i
    2020-12-03 12:44

    You can (ab?)use the :target selector. This probably won't work in older browsers. Here's a super simple example I made that toggles the background when the link is clicked.

    The concept is to apply CSS styling to targeted elements. In the code below, clicking the link will target the body's ID, which applies the style in body:target (changing the background color). 

    <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

    0 讨论(0)
  • 长情又很酷
    2020-12-03 12:51

    You could do something like this -- using the adjacent css selector :

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

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

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

    0 讨论(0)
  • 遇见更好的自我
    2020-12-03 12:57

    No, there's no concept of "click then do something" in CSS.

    0 讨论(0)
  • 误落风尘
    2020-12-03 12:57

    There is a way to do it:

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

    The :focus basically means when you click on the element with the class cc2 it will turn it's background blue :) Hope that helps.

    0 讨论(0)
 看不清?
提交回复
热议问题