Onclick Equivalent in Css

HTML & CSS
1 
.class input:hover {
}

Do we have alternative for onclick event in CSS.

.class input:click {
}

The above doesn’t work, but do we have any alternative for this in CSS(w/o using Javascript)?

2

You should check these for browser support before you use them, but what you’re thinking of are “pseudo-classes”

2 Likes
3

I guess what comes closest are :focus, :checked and maybe :active… like e.g.

.message {
  display: none;
}

.clickable:focus + .message,
.clickable:checked + .message {
  display: unset;
}

input.clickable {
  display: none;
}

<div>
  <a href="#" class="clickable">Click me</a>
  <span class="message">Clicked!</span>
</div>

<div>
  <label for="check">Toggle me</label>
  <input type="checkbox" id="check" class="clickable">
  <span class="message">Toggled!</span>
</div>

But there’s of course not much logic you can implement with CSS alone, other than changing the styles of sibling or child elements… and trying to do more advanced stuff like e.g. showing a modal is generally considered a hack. It’s usually best to use JS for logic and CSS for styling. :-)

4 Likes
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.