CSS element disables clicks
CSS Elements Cannot Be Clicked
In web development, sometimes we want certain elements to be displayed on the page but not clickable. For example, we might want to prevent users from clicking on display elements or informational elements. In these cases, we can use CSS to prevent clicks on these elements. This article details how to use CSS to prevent clicks on these elements.
The pointer-events property
CSS provides the pointer-events property, which specifies the circumstances under which an element can become the target of mouse events. The pointer-events attribute has the following values:
auto: The default value, indicating that the element can be the target of mouse events.none: Indicates that the element will never be the target of mouse events.visiblePainted: Indicates that the element can be the target of mouse events within the entire display area.visibleFill: Indicates that the element can be the target of mouse events on visible fill content.visibleStroke: Indicates that the element can be the target of mouse events on visible stroke content.- <
visible: Indicates that the element’s visible fill and stroke are the target of mouse events. painted: Indicates that the element’s entire display area is the target of mouse events, but transparent areas are not.stroke: Indicates that the element’s stroke is the target of mouse events.fill: Indicates that the element’s fill is the target of mouse events.
By setting the pointer-events property to none, you can prevent an element from being the target of mouse events, thereby achieving a click-disabled effect.
Example Code
The following example demonstrates how to use the pointer-events property to disable clicks on an element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Element Disable Click Example</title>
<style>
.disabled {
pointer-events: none;
background-color: gray;
color: white;
padding: 10px;
border-radius: 5px;
}
</style>
</head>
<body>
<button class="disabled">Disable button</button>
Disable link
<div class="disabled">Disable DIV</div>
</body>
</html>
In the example above, we created a webpage with three elements: a button, a link, and a DIV. All three elements have the disabled class added, and the pointer-events: none; style set via CSS. This disables click events on these three elements.
Runtime Results
When you open the sample code above in a browser, you’ll see a gray box containing a button, link, and DIV element. Clicking on these three elements will reveal that nothing happens; no click event is triggered.
This method allows us to easily disable click events on certain elements, achieving the desired effect.
Summary
This article detailed how to use the CSS pointer-events property to disable click events on elements. By setting the pointer-events: none; style, we can easily make certain elements unclickable. This is a very useful technique in web development, allowing us to control the user’s interactive experience with the page.