Can one disable an input field by pure css?

Question

Like with attribute disable on the <input> html tag.

I'm not interested in the effects of disabling, like not being included in a POST of the form, and the styling could of course be redone in css, if it should just look disabled. (And my input field is a submit button, so disabling from POST is irrelevant.)

I just need it to be unclickable and to look disabled.

Is that possible in pure css without adding the attribute on the html tag?

Solution 1

No you cannot disable the functionality of it via just CSS (since it is there just for styling purposes), though you can make it appear greyed out like a disabled button using CSS. To make it disabled in terms of functionality, you will have to resort to JavaScript.

---

With CSS all you can do is to style your button greyed out via CSS and then create another element over it making its z-index higher, setting position and opactiy to fully transparent. This would mean your actual element is enabled but one will not be able to click it because of element over it with full transparency.

---

Another solution is to just add pointer-events: none; to the style of the dom element, should work on most of the browsers.

Solution 2

you can do in the below manner...

.input-disable {
  pointer-events: none;
  border: 1px solid grey;
  background-color: lightgrey;
}

input[type=text] {
  height: 30px;
  width: 180px;
  padding: 10px;
}

<input type="text" value="Normal field">
<input type="text" class="input-disable" tabindex="-1" value="disabled field">

Solution 3

you can add the following CSS which will disable any pointer events. this will also disable hover, focus etc.

.style { 
   pointer-events: none; 
}

Solution 4

You can make it look like disabled, but you cannot prevent it to be clickable with just CSS. An horrible hack would be to overlay a div or some other element, then the button wouldn't be clickable.

View more solutions