CODEWITHSUNDEEP
css
Kirnc
Kirnc

Reputation: 43

When a button is clicked change css without JavaScript?

When a button is clicked change css without JavaScript?

I believe you can do it by making a button a checkbox instead?

Thank you

Upvotes: 1

Views: 2200

Answers (1)

Michael Coker
Michael Coker

Reputation: 53709

It's called the "checkbox hack". You can use a checkbox or radio, then use the :checked pseudo class in CSS to target other elements on the page using the + or ~ sibling selectors. Here's an example.

input {
  display: none;
}

label {
  color: #09c;
  cursor: pointer;
}

input:checked ~ div {
  color: green;
}

input:checked + div {
  color: red;
}
<label for="checkbox">click</label>
<input type="checkbox" id="checkbox">

<div>adjacent element</div>

<div>general sibling</div>
<div>general sibling</div>
<div>general sibling</div>

Upvotes: 3

Related Questions