Disable input field with CSS - prevent keyboard manipulation

Question

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

readonly changes element's html, what will require JavaScript in my case, I guess I will finally be forced to do so, however even with readonly and all CSS rules in my original post, I can still select input with tab and as I mentioned I can accept highlight around the field, but it also highlights quantity. — Ryszard Jędraszyk
– Ryszard Jędraszyk, Commented May 21, 2019 at 19:11
@RyszardJędraszyk readonly is CSS pseudo-class. why would it require JavaScript in your case? — TheUnKnown
– TheUnKnown, Commented May 21, 2019 at 19:43
Don't I need to place readonly within <input> tag? About input value's highlight, I solved it with this: .readonly-qty::selection { background: transparent; } readonly-qty::-moz-selection { background: transparent; }, I guess I'll need JS to add class readonly-qty anyway, but at least it works and with readonly I don't need pointer-events: none;, so title displays correctly without workarounds. — Ryszard Jędraszyk
– Ryszard Jędraszyk, Commented May 21, 2019 at 20:24
@RyszardJędraszyk You never mentioned you want to highlight the input value as well. You can do so by just selecting the input value as follows: input[value] { color: blue;} — TheUnKnown
– TheUnKnown, Commented May 21, 2019 at 22:04

TheUnKnown · Accepted Answer · 2019-05-21 18:33:52Z

1

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

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

answered May 21, 2019 at 18:33

TheUnKnown

6816 silver badges31 bronze badges

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

Collectives™ on Stack Overflow

Disable input field with CSS - prevent keyboard manipulation

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related