CODEWITHSUNDEEP
csshtml
Philip Loyer
Philip Loyer

Reputation: 768

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?

Upvotes: 21

Views: 132539

Answers (4)

Zane Li
Zane Li

Reputation: 26

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

Upvotes: 0

Dhruv Naik
Dhruv Naik

Reputation: 171

Try this, it worked for me:

div:active{  

    background-color:white;

}

Upvotes: 8

mario
mario

Reputation: 17

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

Upvotes: -2

Yuriy Galanter
Yuriy Galanter

Reputation: 39807

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/

Upvotes: 46

Related Questions