CODEWITHSUNDEEP
htmlcss
Rocco The Taco
Rocco The Taco

Reputation: 3797

Disable Form Input with CSS

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

Upvotes: 1

Views: 11349

Answers (3)

Gustaf Gun&#233;r
Gustaf Gun&#233;r

Reputation: 2267

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>

Upvotes: 1

aahhaa
aahhaa

Reputation: 2275

simply use disabled to disable input. 

<input type="submit" disabled>

Upvotes: -2

Jon Uleis
Jon Uleis

Reputation: 18649

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.

Upvotes: 2

Related Questions