How to Simulate the Onclick Event in CSS

1. Use the Checkbox Hack to Simulate an Onclick Event in CSS
2. Use the :target Pseudo-Class to Simulate an Onclick Event in CSS
3. Use the :focus Pseudo-Class and the tabindex Attribute to Simulate Onclick Event in CSS

This article introduces methods to simulate onclick events in CSS.

Use the Checkbox Hack to Simulate an Onclick Event in CSS

We cannot achieve the exact JavaScript onclick event in CSS. However, we can use a CSS trick to simulate an onclick event. The core concept behind this trick is the use of a checkbox and the label tag. We can attach them using the same value for the id attribute in the checkbox and the for attribute in label. Clicking on the label will check and uncheck the checkbox. Thus, we can use the :checked selector to select the checkbox when it is clicked. We will use the adjacent sibling selector, +, to select the img tag inside the label along with the checkbox. Thus, when the checkbox is checked, we can select the image and change its dimensions. Therefore, we can achieve the onclick feature using CSS.

For example, create a checkbox from the <input> tag. Set the id of the checkbox as btn. Below it, write a <label> tag and write the same value btn as the for attribute’s value. Inside the label tag, insert an image. Next, in CSS, select the id btn with the CSS selector and set the display to none. Subsequently, use the :checked selector on the btn id as #btn:checked. Use the + operator to select the img tag inside the label tag. After selecting, set the height and width to 75px.

Here, when we click the image, the size of the image decreases. Initially, the image is of 100px size. Thus, we achieved the onclick functionality using CSS.

Example Code:

<input type="checkbox" id="btn"/>
<label for="btn">
    <img src="/img/DelftStack/logo.png" />
</label>

#btn{
    display: none;
}
#btn:checked + label > img {
    width: 75px;
    height: 75px;
}

Use the :target Pseudo-Class to Simulate an Onclick Event in CSS

We can use the :target pseudo-class to simulate the onlick event only using CSS. The pseudo-class helps to style the active element in CSS. In this method, the core concept is to change the display property of the elements. When the element is inactive, we can set the display to none and change it to block when the element is selected with the :target pseudo-class. We can style the element whose id matches the URL’s fragment with the :target pseudo-class.

For example, write an anchor tag with the URL #day. Write the text What day is today? inside the tag. Below it, make a div element with the id day. Write the text Sunday inside the div. In CSS, select the id day with the id selector and set the display property to none. Next, select the same id with the :target pseudo-class and set the display property to block.

In the example below, when we click the text What day is today?, Sunday will appear. We used the :target class to change the display of the hidden element to visible. In this way, we can simulate onclick events in CSS.

Example Code:

<a href="#day">What day is today?</a>
<div id="day">Sunday</div>

#day {
    display: none;
}
#day:target {
    display: block;
}

Use the :focus Pseudo-Class and the tabindex Attribute to Simulate Onclick Event in CSS

We can use the tabindex attribute in the img tag and the :focus pseudo-class to simulate onclick events in CSS. For example, insert an image with the img tag with id as pic and tabindex value as 0. In CSS, select the pic id with the :focus pseudo-class. Then, change the height and width of the image to 75px. The initial size of the image was 100px. Here, when we click the image, the image will change its size to 75px. Therefore, we can achieve the onclick event using only CSS.

Example Code:

 <img id="pic" tabindex="0" src="/img/DelftStack/logo.png" />

#pic:focus{
    width: 75px;
    height: 75px
 }