CSS OnClick: How To Create a CSS OnClick Function

There is no built-in CSS OnClick function. This makes sense, as CSS is primarily a markup language rather than a programming language. However, there is an HTML OnClick attribute that can be used with JavaScript — and there is a way to work around the lack of CSS OnClick through a “checkbox” hack.

To use CSS onClick, you’ll essentially need to create a pseudo class. You’ll use CSS selectors and the checkbox hack to produce something like an OnClick function. And you can get away with this if you just want to use only CSS to make some minor changes, like border width or border radius.

Let’s take a deeper look at how to use the OnClick function in CSS.

What does it mean to do something “OnClick”?

You click a button. An alert pops up. That’s an “OnClick.” An “OnClick” is an event that fires exactly when the user clicks a button. And note that it occurs when the user clicks, not when the user stops clicking (OnMouseUp).

Consider a click event that changes the background image of a page, highlights a target display block, loads an IMG SRC HTTPS file, or otherwise changes the site. All these things are generally done through a combination of HTML, CSS, and JavaScript, not CSS alone.

Recommended Learning Platform course

The Web Developer Bootcamp 2026

Colt Steele