How do I prevent the keyboard popping up on mobile?

I have a Form with Text Input field set as a Date Picker.

On a mobile device, when you tap on the Input field, both the Date Picker and the keyboard pop-up.

I don’t want the keyboard to pop-up. I can set the Input field as “Readonly” which works (it prevents the keyboard from appearing) BUT the field is then greyed out, and I want it to be white like all the other fields. This is on an SPA page.

I know with CSS I could set

input:read-only { background: white; }

but then any fields that I have purposely set as Readonly will turn white when I want them to be greyed out!

Is there a way to select just Date-Picker fields and set them as white?

input:dmx-date-picker:read-only { background: white; }

perhaps?