web-dev-qa-db-ja.com

CSSのみを使用して、ボタンのクリック時に背景を変更しますか？

buttonクリックで背景色を変更することは可能ですか？ document全体のうち、CSSとHTML5のみを使用していますか？

（例： JavaScriptでは簡単です ）

javascriptjqueryhtml5css3background-image
8
A T

コメントに投稿したフィドルに基づいて、Bootstrap button 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;
}

隣接する兄弟セレクター を使用します。

これが機能しています： http://jsfiddle.net/eYgdm/ （ラベルテキストの選択を防ぐために*-user-select: none;を追加しましたが、ラベルが機能するために必須ではありません）

ブラウザのサポート

Chrome、Firefox [デスクトップおよびモバイル]（Gecko）≥1.0、Internet Explorer≥7、Opera≥9およびSafari≥3参照： 属性セレクター および 隣接する兄弟セレクター

8
Joe

あなたはこのようなことをすることができます-隣接するCSSセレクタを使用します：

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

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

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

3
Jeff

いいえ、CSSには"クリックしてから何かを行う"という概念はありません。

1
frenchie

残念ながら、CSSルールにはバックトラックはありません。 CSSセレクターの場合、要素の祖先を登る方法はありません。

0
Prusprus

それを行う方法があります：

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

：focusは基本的に、クラスcc2の要素をクリックすると、背景が青くなることを意味します。

0
crablab

：targetセレクターを（ab？）使用できます。これはおそらく古いブラウザでは機能しません。リンクをクリックすると背景が切り替わる非常に簡単な例を次に示します。

コンセプトは、ターゲット要素にCSSスタイルを適用することです。以下のコードでは、リンクをクリックすると本文の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

0
Sean