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?

Why with CSS and not `disabled` or `readonly` attributes? I'm curious to know of a legit case of why it makes sense to subvert standards and avoid using the html attributes that do exactly what you want. — Wesley Murch, Jun 24 '12 at 18:42
The only way I can think of would be to put a div over the top of the button, and then show or hide that div with a transparency of 0.01, i think that would make the button unclickable. and you could alter that divs display property to block/none depending on the status of the button — SmithMart, Jun 24 '12 at 18:42
possible duplicate of [How do I disable form fields using CSS?](http://stackoverflow.com/questions/5963099/how-do-i-disable-form-fields-using-css) - if you don't mind users using tab hacks to reach the input field, the accepted answer works, otherwise IMO that answer sucks. — BoltClock, Jun 24 '12 at 18:44
I agree. It is not possible I see, and workarounds are horrible, so I may live with using an extra JS line in my code to add that tag. To bad — Steeven, Jun 24 '12 at 18:49

score 7 · Accepted Answer · edited Feb 12 '20 at 15:53

7

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.

edited Feb 12 '20 at 15:53

Alberto S.

1,805
23
39

answered Jun 24 '12 at 18:42

Sarfraz

377,238
77
533
578

Yea okay, it is not possible. Thanks for the answers to both of you. – Steeven Jun 24 '12 at 18:47
@Steeven: There is one way if it would fit your needs, see my last para :) – Sarfraz Jun 24 '12 at 18:48
Seems like if it requires editing HTML (adding another element), might as well just use the `disabled` attribute and not bother to use unstable hacks. Too bad `:after/:before` doesn't work on inputs. – Wesley Murch Jun 24 '12 at 18:54

score 4 · Answer 2 · answered May 15 '18 at 11:35

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">

score 2 · Answer 3 · answered Feb 15 '21 at 19:15

2

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

.style { 
   pointer-events: none; 
}

answered Feb 15 '21 at 19:15

Quade du Toit

91
1
11

score 1 · Answer 4 · answered Jun 24 '12 at 18:42

1

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.

answered Jun 24 '12 at 18:42

bfavaretto

71,580
16
111
150

Can one disable an input field by pure css?

4 Answers4