How to add a class with css?

Question

I have a case where I use a frontend framework to beauty my website. In this framework when an input is focused (I mean when someone clicked input), the class is toggled. Unfortunately by jQuery. And the whole problem is I don't want to use a jQuery.

Is there any way to toggle class in CSS only?

<input type="text" name="street">
<label class="active"></label>

Class 'active' should be toggled in label element when input was clicked. Thanks!

EDIT: that topic is from 2013' and dosn't satisfy me :( c

and it's still valid until now ;) and will always be valid :) — Temani Afif, Feb 28 '18 at 21:26

leopinzon · Answer 1 · 2018-02-28T21:20:03.637

0

You can write CSS clases for both states in order to avoid messing with jQuery actions but still have the look & feel you expect.

Something like this can make the trick (CSS):

label.active, label.active:focus, label.active:focus-within, label:not(.active){
  //Your look and feel
}

edited Feb 28 '18 at 21:20

answered Feb 28 '18 at 21:13

leopinzon

707
6
13

Hi, thanks, but your solution isn't connected with an input focus. – tylkonachwile Feb 28 '18 at 21:15
In that case you need to add the state to the statement: label.active:focus{} or label.active:focus-within{} – leopinzon Feb 28 '18 at 21:17

How to add a class with css?

1 Answers1