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
– j08691, Commented Aug 21, 2017 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
– Ilya Streltsyn, Commented Aug 21, 2017 at 16:48
Keep in mind that you still be able to access the field with your tab key. — lumio
– lumio, Commented Aug 21, 2017 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
– Muhammad, Commented Aug 21, 2017 at 16:58

Jon Uleis · Accepted Answer · 2017-08-21 16:49:03Z

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, 2017 at 16:49

Jon Uleis

18.9k3 gold badges36 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Gustaf Gunér Over a year ago

You can still tab to it

freginold · Accepted Answer · 2017-08-21 17:19:10Z

1

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, 2017 at 17:19

freginold

3,9603 gold badges16 silver badges30 bronze badges

answered Aug 21, 2017 at 16:50

Gustaf Gunér

2,2674 gold badges19 silver badges23 bronze badges

1 Comment

Niki Romagnoli Over a year ago

Please note that disabled input won't be submitted.

aahhaa · Accepted Answer · 2017-08-21 16:49:04Z

-2

simply use disabled to disable input.

<input type="submit" disabled>

answered Aug 21, 2017 at 16:49

aahhaa

2,2713 gold badges20 silver badges31 bronze badges

Collectives™ on Stack Overflow

Disable Form Input with CSS

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related