CODEWITHSUNDEEP
css
Ryszard Jędraszyk
Ryszard Jędraszyk

Reputation: 2412

Disable input field with CSS - prevent keyboard manipulation

I use quantity input field for product and don't want to allow any interaction with it:

<input id="product-qty" type="number">

My CSS is the following:

#product-qty {
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

But it's not enough, when I TAB, I can select quantity field and then do any keyboard entry I please. I can accept selecting quantity field, maybe it's even good accessibility-wise, but can't allow to enter or remove anything.

I know how to solve it with JavaScript, what I want is to know whether it's possible with CSS only and if yes - how to do it.

Fiddle example

Upvotes: 0

Views: 1189

Answers (1)

TheUnKnown
TheUnKnown

Reputation: 681

As @j08691 mentioned, you can use readonly to prevent any interaction with the input.

<input readonly id="product-qty" type="number">

Upvotes: 1

Related Questions