Change the CSS style of selected element using CSS only

Question

I have a box and I want to change the style, like change the border when a user click on that box.

I know this can be done through JS or jQuery, but is this possible using only CSS?

I tried using :focus and :active, it does changes the style when you click, but on release of the click it reverts the CSS

Here is my code:

CSS:

<div class="box"></div>
.box{
    width:100px;
    height:100px;
    border:2px solid #ff0000;

}

.box:active, .box:focus {
    border: 2px solid #00afec;
}

I created the Fiddle also to try: http://jsfiddle.net/cj3LV/

Please suggest!

No, it isnt possible ;) This is just possible with JS or jQuery — user2628521
– user2628521, Commented Mar 7, 2014 at 20:32
This is only possible if you add to the HTML so you can do the checkbox hack — Zach Saucier
– Zach Saucier, Commented Mar 7, 2014 at 20:32
Works fine with a text input like in this fiddle, otherwise you probably want to use jQuery selectable for any divs. — Tomanow
– Tomanow, Commented Mar 7, 2014 at 20:34

Marcel · Accepted Answer · 2014-03-07 21:14:41Z

5

There is a Trick with a Checkbox in CSS: Its possible because of following things:

The Checkbox is hidden.
If you clicked on the Label you are checked the Checkbox. The Reason is the same value in for="toggle-1" and id="toggle-1"
This declartion input[type=checkbox]:checked ~ .box { } matches elements that are siblings of the given element. This will match a .box element if it's a sibling of input[type=checkbox]:checked

http://jsfiddle.net/cj3LV/3/

CSS:

.box, .label{
    width:100px;
    height:100px;
    border:2px solid #ff0000;
    text-align:center;
    line-height: 100px;
}
.label {
    position: absolute;
    display:block; 
    border:0;
}
#toggle-1 { display:none; }


/* Toggled State */
input[type=checkbox]:checked ~ .box {
   border: 2px solid #00afec;
}

HTML:

<label for="toggle-1" class="label"></label>
<input type="checkbox" id="toggle-1">
<div class="box">Click ME!!</div>

For more Information you can read here: http://css-tricks.com/the-checkbox-hack/

edited Mar 7, 2014 at 21:14

answered Mar 7, 2014 at 20:37

Marcel

3751 silver badge8 bronze badges

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

3 Comments

Impirator Over a year ago

Fair enough, although the semantics of this is pretty unpalatable.

Edward Over a year ago

Could you kindly explain the principle behind this?

Edward Over a year ago

Interesting. I didn't know that for="something" and id="something" binds together the elements in terms of the events. Thanks for your explanation.

sidney · Accepted Answer · 2014-03-07 20:44:57Z

2

Here you go: FIDDLE

HTML

<div id='clickme'><a href="#clickme">Click Me</a></div>

CSS

#clickme{
    width:100px;
    height:100px;
    border:2px solid #ff0000;
    text-align:center;
    line-height: 100px;
}

#clickme:target
{
    background-color: red;
}

Edit: I initially deleted it because there was a better answer. But I was wrong, it can serve.

edited Mar 7, 2014 at 20:44

answered Mar 7, 2014 at 20:36

sidney

2,7243 gold badges31 silver badges45 bronze badges

Comments

Rik · Accepted Answer · 2014-03-07 20:44:51Z

1

You might use target but you need to create a link

http://css-tricks.com/on-target/

https://developer.mozilla.org/en-US/docs/Web/CSS/:target

answered Mar 7, 2014 at 20:44

Rik

3081 gold badge2 silver badges11 bronze badges

Collectives™ on Stack Overflow

Change the CSS style of selected element using CSS only

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related