How to prevent the click event using CSS ?
I have created the form page , then i need to prevent the click event using only CSS?
I have tried this css property, but not worked.
<div>Content</div>
div {
display: none;
}
Asked
Active
Viewed 9.7k times
74
-
1Please provide your code and describe all the steps that you have done. – knstvk Jun 26 '17 at 09:16
-
You can't prevent click with css, you must use javascript. The dislpay:none only hide a element, in this case, a div. – Roy Bogado Aug 21 '17 at 11:31
-
Do not change questions that much (revision 4)! – Qwertiy Aug 21 '17 at 11:56
-
@Roy on a technicality you're right. But you can just use hacky solutions like not making it clickable by disabling user-select and disabling pointer-events, but it's not gonna work in all cases and it's a bit hacky. – GeorgeWL May 29 '18 at 13:56
-
1`display: none` just hides the element which makes it indeed not clickable, but I presume that's not what you want. I recommend give a class to the element(s) you want to hide and create a CSS rule for it. For example: `div.not-clickable { pointer-events: none; }` - https://developer.mozilla.org/en/docs/Web/CSS/pointer-events – S. Esteves Mar 25 '19 at 06:24
1 Answers
173
You can try the css class:
.noClick {
pointer-events: none;
}
kevinSpaceyIsKeyserSöze
- 2,831
- 2
- 16
- 22
-
3Yeah, but how to still allow hover actions on that element? For example; .noClick:hover { cursor: not-allowed; } – iPzard Nov 28 '18 at 18:37
-
2@iPzard check [this](https://stackoverflow.com/questions/46665625/how-to-combine-cursor-not-allowed-and-pointer-events-none) out. – kevinSpaceyIsKeyserSöze Nov 29 '18 at 16:19
-
Thanks! I ended up using a JavaScript solution, but this CSS one would be better if it works. I'll have to give it a try tomorrow. – iPzard Nov 30 '18 at 08:09
-
-