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: tympanus.net/codrops/2012/12/17/css-click-events - give it a try? — blurfus
– blurfus, Commented Nov 21, 2014 at 19:50
possible duplicate of active(selected), hover and inactive tab/div css logic — Chris W.
– Chris W., Commented Nov 21, 2014 at 19:54
I think you can find the answer in [here][1] [1]: stackoverflow.com/questions/19260401/… — Ehsan
– Ehsan, Commented Nov 21, 2014 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 — John Galassi
– John Galassi, Commented Jul 27, 2017 at 10:14

Comfortably Numb · Accepted Answer · 2014-11-21 19:53:44Z

46

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, 2014 at 19:53

Comfortably Numb

39.9k17 gold badges82 silver badges147 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Dave Over a year ago

This works, as long as you don't have other items on the page that may take the focus.

Comfortably Numb Over a year ago

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.

Philip Loyer Over a year ago

I tried this and like dave said as long as there are other things on the page it doesnt seem to work. Thanks though

Mohammed Akdim Over a year ago

Thank you this work. But I have a question Please how can I select a default one ?

EugenSunic Over a year ago

and then you click outside of a div and you color is gone... how do you maintain the color without using js

|

pheeleeppoo · Accepted Answer · 2020-05-05 13:06:10Z

8

Try this, it worked for me:

div:active{  

    background-color:white;

}

edited May 5, 2020 at 13:06

pheeleeppoo

1,5336 gold badges26 silver badges31 bronze badges

answered May 5, 2020 at 7:29

Dhruv Naik

1712 silver badges2 bronze badges

2 Comments

jasie Over a year ago

please improve your answer by adding a link to docu of :active pseudoselector

Eric Over a year ago

This doesn't work.

Zane Li · Accepted Answer · 2021-08-06 09:12:20Z

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

mario · Accepted Answer · 2018-03-08 14:11:40Z

-2

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

answered Mar 8, 2018 at 14:11

mario

172 bronze badges

Collectives™ on Stack Overflow

Change div background color on click using only css

4 Answers 4

8 Comments

2 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

8 Comments

2 Comments

Comments

Comments

Linked

Related