Philip Loyer Philip Loyer - 1 year ago 146
CSS Question

Change div background color on click using only css

So I have a div I want to change the color of when clicked. I have three divs over all and I want to denote which one is the active div when clicking on it

Basically I want to use the CSS active property but not have the particular div change back when the mouse up occurs. Sort of like a focus. I am also using bootstrap if that is helpful

Here is a example of the html

<div>
Section 1
</div>
<div>
Section 2
</div>
<div>
Section 3
</div>


Could anyone tell me how i could accomplish this without using javascript?

Answer Source

Make your DIVs focusable, by adding tabIndex:

<div tabindex="1">
Section 1
</div>

<div tabindex="2">
Section 2
</div>

<div tabindex="3">
Section 3
</div>

Then you can simple use :focus pseudo-class

div:focus {
    background-color:red;
}

Demo: http://jsfiddle.net/mwbbcyja/

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download