Disable Form Input with CSS

Question

I have the following form element I need to disable from accessing via the mouse using purely CSS. I do not have access to the form element to disable by editing the form input markeup, I only have access to the CSS style sheets.

<input type="text" name="rs:def:website" size="48" maxlength="64">

I'm attempting to use the pointer-events:none to disable the element from being able to accept input. I need to make sure I don't disable other text input.

This is what I've tried with no luck. Any suggestions?

.rs:def:website .input{
  pointer-events: none;
}

Why use `pointer-events` instead of the `disabled` or `readonly` attributes? — j08691, Aug 21 '17 at 16:46
The dot notation is for class selector, but you try to address the element by an attribute different from `class`. Also, space in the selector means that the second part is the descendant of the first one, but you have a single element. Have you tried `input[name="rs:def:website"]` instead? — Ilya Streltsyn, Aug 21 '17 at 16:48
Possible duplicate of [How to disable all div content](https://stackoverflow.com/questions/639815/how-to-disable-all-div-content) — lumio, Aug 21 '17 at 16:50
Keep in mind that you still be able to access the field with your `tab` key. — lumio, Aug 21 '17 at 16:51
pointer event is not meant to disable the input it will just prevent from clicking the element, you can still focus the input by using the keyboard by pressing tab button and then you can input data. — Muhammad, Aug 21 '17 at 16:58

score 2 · Accepted Answer · answered Aug 21 '17 at 16:49

2

Here is the correct CSS selector:

input[name="rs:def:website"] {
  pointer-events: none;
}

<input type="text" name="rs:def:website" size="48" maxlength="64">

As noted by other answers, this is not a foolproof way to prevent users from editing this input.

answered Aug 21 '17 at 16:49

Jon Uleis

17,693
2
33
42

1

You can still tab to it – Gustaf Gunér Aug 21 '17 at 16:51

score 0 · Answer 2 · edited Aug 21 '17 at 17:19

0

It's not possible with pure CSS. pointer-events: none; might work in some cases, but you can still Tab through.

You will need to change the actual HTML. Add disabled, either directly in the HTML-file or via Javascript.

<input type="text" name="rs:def:website" size="48" maxlength="64" disabled>

edited Aug 21 '17 at 17:19

freginold

3,946
3
13
28

answered Aug 21 '17 at 16:50

Gustaf Gunér

2,272
4
17
23

Please note that disabled input won't be submitted. – Niki Romagnoli Apr 27 '23 at 09:13

score -2 · Answer 3 · answered Aug 21 '17 at 16:49

-2

simply use disabled to disable input.

<input type="submit" disabled>

answered Aug 21 '17 at 16:49

aahhaa

2,240
3
19
30

Disable Form Input with CSS

3 Answers3