Css: Focus Not Working
I Tried Using: Focus Css Pseudo-Class in My Project. I Want to Change the Color of the Element Where I Click on It. Now When I Click My Element Change Color...
I tried using :focus CSS pseudo-class in my project. I want to change the color of the element where I click on it. Now when I click my element change color only where it is active and after mouse up it return to old color. After second click I want it back to old color. I'm using Chrome.
Demo here
.row {
display: inline-block;
border: 1px solid grey;
height: 200px;
width: 200px;
line-height: 1em;
background: grey;
margin: 5px;
opacity: 0.1;
}
.row:active,
.row:focus {
background: orange;
}<div id="main" class="container">
<div class="row" id="row0">
</div>
</div>5 Answers
If you want a real focus state to a div element, you can add a tabindex attribute to it.
.row {
display:inline-block;
border:1px solid grey;
height:200px;
width: 200px;
line-height:1em;
background: grey;
margin: 5px;
opacity: 0.1;
}
.row:active, .row:focus { background: orange; }
<div id="main" class="container">
<div class="row" tabindex="1" id="row0">
</div>
</div>If you want toggle the color with clicking the same div element, you have to use javascript (jQuery):
jQuery('#row0').click(function() {
$(this).toggleClass('orange');
});.row {
display:inline-block;
border:1px solid grey;
height:200px;
width: 200px;
line-height:1em;
background: grey;
margin: 5px;
opacity: 0.1;
}
.row.orange { background: orange; }<script src=""></script>
<div id="main" class="container">
<div class="row" id="row0">
</div>
</div>Following Andy Tschiersch's answer, I would suggest using tabindex = "0" (which is its default value) instead of tabindex = "1".
See:
<div id="main" class="container">
<div class="row" id="row0" tabindex="0" >
</div>
</div>
You can emulate the toggle effect with a CSS trick by adding a hidden checkbox input.
HTML :
<div id="main" class="container">
<input type="checkbox" />
<div class="row" id="row0">
</div>
</div>
CSS :
.container { position: relative; }
input { position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 200px; height: 200px; z-index: 1; opacity: 0; display: block; }
input:checked + .row { background: orange; }
.row {
display:inline-block;
border:1px solid grey;
height:200px;
width: 200px;
line-height:1em;
background: grey;
margin: 5px;
opacity: 0.1;
}
.row:active, .row:focus { background: orange; opacity:1 }<div id="main" class="container">
<div class="row" tabindex="1" id="row0">
</div>
</div>Please try this...
What you are looking for is :visited, but this doesn't work on a div. You should use the a-tag for it (including href="#").
.row:active, .row:visited { background: orange; }
Check the fiddle below:
Edit: Vincent G's answer seems to do more what you want though, since you can remove the background color by clicking away.
Sophia analyzes international trade, startup ecosystems, retail transformation, and supply chain logistics for modern digital publications.
