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.
Last Updated September 2023
10 Hours of React just added. Become a Developer With ONE course – HTML, CSS, JavaScript, React, Node, MongoDB and More! | By Colt Steele
Explore CourseUsing the OnClick function of HTML with JavaScript
You can use the OnClick function of HTML with JavaScript. The way to do this is to create a JavaScript function and then attach the function to the onclick event of the HTML element. You would use something like this:
| function changeBackgroundIMG() { var bg = document.getElementById(“bgIMG”); bg.style.background = “url(‘newimage.jpg’)”; } document.getElementById(“btn”).onclick = changeBackgroundIMG; |
In this example, the function is called changeBackgroundIMG(). It takes one argument, bg, which is the HTML ID of the element that contains the background image. The function then sets the background property of the bg element to the URL of the new background image.
The last line in the code attaches the changeBackgroundIMG() function to the onclick event of the bg element. So, when you click on the bg element, the changeBackgroundIMG() function will be executed.
The hack for using CSS OnClick
While it’s not machine learning or setting up a virtual machine, it’s complicated to use CSS selectors to try to create an onClick function.
So, why would you want to do it? Well, let’s say you can’t run JavaScript, or you’re trying to complete your web development with maximum browser support.
To use only CSS, you need to take advantage of label tags, ID matching, and checkboxes.
Here’s how to use the CSS OnClick function:
1. Add a label to your checkbox.
2. Give the label an ID that matches the ID of the checkbox.
3. In your CSS, use :checked to target the checked state of the checkbox.
Top courses in CSS
Essentially, the “checked” state of the checkbox will define the “clicked” element. But the checkbox must be the element of the OnClick attribute.
| <style> label { display: block; background: blue; width: 100px; height: 100px; } #box:checked + label { background: green; } </style> </head> <body> <form action=”/form/submit” method=”post”> <input type=”checkbox” id=”box” /> <label for=”box”>Change background</label> </form> |
Obviously, this isn’t the optimal way to do things. But it is the only way to actually use an OnClick function in CSS.
The importance of an OnClick function
An OnClick function allows you to interact with the user. For example, you can show an alert box or load a new page using an OnClick function.
Without an OnClick function, you would need to use JavaScript to do these things. So, if you want to create more dynamic and interactive websites, you need to use OnClick functions.
The CSS OnHover event
There is another option: the CSS OnHover event. This event fires when the user moves the mouse over an element. You can use it to change the CSS of an element when the mouse is moved over it.
Here’s how you would use it:
- Add a class to your HTML element.
- In your CSS, use :hover to target the hover state of the element.
- Add the desired CSS properties to the :hover selector.
| <style> .highlight { background: blue; } </style> <div class=”highlight”>Highlight</div> |
In this example, the .highlight class is added to a <div> element. The background color of the .highlight class is set to yellow. When you move your mouse over the <div> element, the background color will change to yellow.
While this isn’t an “OnClick” event, it’s also not a JavaScript event. And that’s important if you’re trying to create a beautiful website without having to use JavaScript. On the other hand…
CSS students also learn
The advantages of using JavaScript for OnClick functions
JavaScript is more powerful than CSS. So, if you need to do more complicated things with your OnClick function, you’ll probably want to use JavaScript OnClick event handling.
JavaScript is supported by almost all browsers. So, if you’re trying to create a website that will be used by as many people as possible, JavaScript is still more than capable.
If you’re thinking about doing something like launching a text box or dialogue when someone clicks on a button, CSS isn’t likely to cut it.
Conclusion: the next steps
CSS alone can’t do everything, but with a good understanding of how it works and what’s possible, you can create beautiful and responsive websites using only CSS. Still, you may need to dig deeper into HTML and JavaScript if you want to create truly dynamic sites with OnClick events.
However, if you’re just learning CSS now, pushing the constraints of what you can and can’t do is a great way to get more advanced knowledge. It can also be a good way to prepare for an upcoming interview on CSS programming.
So, what are the next steps? First, you can learn more about modifying attributes such as CSS font size. You can also consider taking one of the many Udemy classes on CSS.
