2

I am trying to add this functionality where when ".icon" is clicked the background color of the hr elements should change from gray to white, and stay white while it is active.

When pressed again it should go back to gray.

I have achieved this using jQuery - Is there a way to do this with pure CSS?

CODE HERE: https://jsfiddle.net/e3ux2ffb/

CSS: * 

{
                margin:0 auto;
                padding:0px;
            }
            .top {
                background-color:black;
                width: 100%;
                height: 60px;
            }
            .icon {
                width: 28px;
                border:1px solid gray;
                padding:5px;
                float:right;
                position:relative;
                top:50%;
                -webkit-transform: translateY(-50%);
                margin-right:10px;

            }


            .icon hr:not(:first-child) {
                margin-top:5px;
            }

            .icon hr {
                height: 2px;
                background-color:gray;
                border:0px;
            }

            .icon:hover {
                cursor:pointer;
            }

            .icon:active, .icon:focus {
                background-color:white;
            }

HTML: 

<div class="top">
            <div class="icon">
                <span><hr><hr><hr></span>
            </div>
        </div>
GSoni
  • 113
  • 1
  • 8
  • 1
    I think its in **Pure CSS** itself right? – Guruprasad J Rao Sep 22 '15 at 14:04
  • But it won't stay white! It happens for a second and then goes back - I want it to stay white when it is pressed once then when pressed again it should go back gray – GSoni Sep 22 '15 at 14:06
  • Not sure this is possible with CSS. Clicks are handled by JS although you might be able to do something with `:target` – Paulie_D Sep 22 '15 at 14:08
  • you can use like - .top:hover .icon { background-color:white; } – Mukul Kant Sep 22 '15 at 14:08
  • Not possible with pure css, how would click state be managed? You could temporarily change it use :target but not on demand. – nykc Sep 22 '15 at 14:09
  • https://jsfiddle.net/arunpjohny/smegk60u/1/ – Arun P Johny Sep 22 '15 at 14:14
  • This is marked as duplicated with a topic that don't have the same answer as OP needs here. – Marcos Pérez Gude Sep 22 '15 at 14:15
  • 1
    @MarcosPérezGude I looked at the dupe marked and this does look like a duplicate to me. Both are asking how to get an onclick effect using pure CSS. Feel free to elaborate on why you believe otherwise. – Maximillian Laumeister Sep 22 '15 at 16:11
  • @MaximillianLaumeister It's because OP needs a fixed state when he clicks in the button. The answer linked in the duplicated makes `:active` pseudo element, so it's trigger only `onmousedown`, and in `onmouseup` it disappears. It's not the same case, even the answers has a similar title. Check my answer that's valid, and check the answer in the duplicated. Both are really different, even someone thinks that no. – Marcos Pérez Gude Sep 22 '15 at 16:20
  • @MaximillianLaumeister maybe it's a related topic, but not duplicated – Marcos Pérez Gude Sep 22 '15 at 16:25
  • @MarcosPérezGude There are multiple answers in the linked question. Duplicates don't have to be duplicates of the accepted answer. As it is, there's a canonical question for this topic already and the answer you gave was already mentioned as of 2013 in an answer there, and there are several other methods as well. I don't think you should be worried; you've already earned 125 reputation from your answer here, and users can continue to vote so long as the question is not locked by a moderator. – TylerH Sep 22 '15 at 17:49
  • I don't worry about it, I understand you. My position is in favor of op, but if moderator users consider that is a duplicate I can't make more. Thank you! – Marcos Pérez Gude Sep 22 '15 at 18:06

2 Answers2

12

With pure CSS there's a trick with a checkbox and :checked pseudoelement.

See it working: https://jsfiddle.net/e3ux2ffb/3/

CSS

 input[type=checkbox] { display: none; }
 input[type=checkbox]:checked + label { background:white;}

HTML

  <div class="top">
       <input type="checkbox" id="chckbx">
       <label for="chckbx" class="icon">
            <span><hr><hr><hr></span>
       </label>
  </div>
Marcos Pérez Gude
  • 21,869
  • 4
  • 38
  • 69
1

yes there is .. you only need a trigger such as radio button or checkbox .. combined with different selector .. example:

checkbox:checked ~ div {
background-color: green;
}

but you need to hide the checkbox using display:none

John Christopher Eniego
  • 151
  • 5