How to prevent the click event using CSS?

Question

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;
}

Please 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
@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
`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

kevinSpaceyIsKeyserSöze · Accepted Answer · 2017-08-21T11:49:31.160

249

You can try the css class:

.noClick {
   pointer-events: none;
}

edited Aug 21 '17 at 11:49

answered Aug 21 '17 at 11:30

kevinSpaceyIsKeyserSöze

3,693
2
16
25

5

Yeah, 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
That's genius! Thanks! – Yulian Apr 01 '20 at 15:19
This was very helpful! I learn a new CSS style everyday – tneilson08 Aug 04 '21 at 18:16

score 0 · Answer 2 · answered Sep 21 '22 at 11:27

I did the following to still allow hover events:

element.addEventListener("focusin", function(event) {
  this.blur()
})

It removes focus from the element once focused. It makes sure that the element won't ever get focus.

It's very suitable for the input tag.

However I don't recommend it if you want a good tab-key-experience.

score -2 · Answer 3 · answered Jul 05 '23 at 19:12

-2

Try this:

document.body.addEventListener("selectstart", function(event) {
  event.preventDefault();
});

I'd seen it recently used in a test-practice website which was trying to prevent me from copy/pasting the site for notes taking. It was pretty effective, took me about an hour to finally track down what was causing it.

answered Jul 05 '23 at 19:12

Stephen - Developer

25
6

2

The question asks for a CSS solution, not JavaScript – j08691 Jul 05 '23 at 19:16

How to prevent the click event using CSS?

3 Answers3

Linked