16

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?

mlwn
  • 1,104
  • 1
  • 10
  • 25
Philip Loyer
  • 708
  • 1
  • 7
  • 22
  • 1
    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
  • 2
    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

4 Answers4

42

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/

Yuriy Galanter
  • 36,794
  • 12
  • 65
  • 122
  • 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
  • 1
    and then you click outside of a div and you color is gone... how do you maintain the color without using js – Eugen Sunic Jun 07 '20 at 13:25
2

Try this, it worked for me:

div:active{  

    background-color:white;

}
pheeleeppoo
  • 1,421
  • 6
  • 22
  • 26
Dhruv Naik
  • 51
  • 2
0

: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;
}
Zane Li
  • 26
  • 4
-2
div:focus {
    background-color:'color';
}
mario
  • 17
  • 2