Change div background color on click using only css

Question

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?

I didn't know if it could be done but I found this: http://tympanus.net/codrops/2012/12/17/css-click-events/ - give it a try? — blurfus, Nov 21 '14 at 19:50
possible duplicate of [active(selected), hover and inactive tab/div css logic](http://stackoverflow.com/questions/6177636/activeselected-hover-and-inactive-tab-div-css-logic) — Chris W., Nov 21 '14 at 19:54
I think you can find the answer in [here][1] [1]: http://stackoverflow.com/questions/19260401/change-background-on-button-click-using-css-only — Ehsan, Nov 21 '14 at 19:54
@Yuriy Galanter: I think I represent that case where a multiple selection is needed, like you mentioned in the comments with dave. This is the topic if you can help: [https://stackoverflow.com/questions/45346380/different-labeled-checkboxes](https://stackoverflow.com/questions/45346380/different-labeled-checkboxes) — John Galassi, Jul 27 '17 at 10:14

score 45 · Accepted Answer · answered Nov 21 '14 at 19:53

45

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/

answered Nov 21 '14 at 19:53

Yuriy Galanter

38,833
15
69
136

This works, as long as you don't have other items on the page that may take the focus. – Dave Nov 21 '14 at 20:00
Well if you click that other item - the DIV will lose focus and restore original style. If that's not intended behavior, OP should elaborate. – Yuriy Galanter Nov 21 '14 at 20:05
I tried this and like dave said as long as there are other things on the page it doesnt seem to work. Thanks though – Philip Loyer Nov 24 '14 at 15:35
Thank you this work. But I have a question Please how can I select a default one ? – Mohammed Akdim Oct 06 '16 at 12:14
@MohammedAkdim you will have to do this in JavaScript. For example to set initial focus on DIV with tabindex=2 you can do `document.querySelectorAll('div[tabindex="2"]')[0].focus();` - check it out: http://jsfiddle.net/mwbbcyja/205/ – Yuriy Galanter Oct 06 '16 at 20:57
@YuriyGalanter, but any one is selected by default in this example ! even if added document.querySelectorAll('div[tabindex="2"]')[0].focus() – Mohammed Akdim Oct 07 '16 at 09:46
2

and then you click outside of a div and you color is gone... how do you maintain the color without using js – EugenSunic Jun 07 '20 at 13:25
The problem is the div remains active, unless click outside the div once. I found using `` and `:active` instead of `
` an easier solution,
– Eric Jul 05 '22 at 03:05

score 6 · Answer 2 · edited May 05 '20 at 13:06

6

Try this, it worked for me:

div:active{  

    background-color:white;

}

edited May 05 '20 at 13:06

pheeleeppoo

1,491
6
25
29

answered May 05 '20 at 07:29

Dhruv Naik

141
2
2

please improve your answer by adding a link to docu of :active pseudoselector – jasie May 05 '20 at 11:36
1

This doesn't work. – Eric Jul 05 '22 at 03:07
awesome this worked for me ^^ – Gisbert12843 Oct 27 '22 at 14:30

score 0 · Answer 3 · answered Aug 06 '21 at 09:12

:active is a great solution both for touch in mobile and click in pc. You can use :active to observe touch and use ::before for mask layer. Remember remove pointer event on ::before or ::before will intercept your click on div

div{
  position: relative;
}
div:active::before{
  content: "";
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%; 
  height: 100%;  
  opacity: .4; 
  z-index: 5;
  background: rgba($color: #000000, $alpha: 0.12);
}
div::before{
  pointer-events: none;
}

score -2 · Answer 4 · answered Mar 08 '18 at 14:11

-2

div:focus {
    background-color:'color';
}

answered Mar 08 '18 at 14:11

mario

17
2

Change div background color on click using only css

4 Answers4

Linked