Readonly inputs shouldn't be grayed out

[tkrotoff]

Bootstrap styles readonly inputs like disabled inputs (since v1.3.0 FYI):

However browsers don't do that:

Chrome 90

readonly:

vs disabled:

IE 11

readonly:

vs disabled:

Firefox 88

readonly:

vs disabled:

Safari 13.2.1

readonly:

vs disabled:

Edge 90

readonly:

vs disabled:

GNOME Web 3.36.4

readonly:

vs disabled:

Frameworks that don't style readonly:

(when there is no demo for readonly/readOnly/isReadOnly, I've manually modified another demo to check behavior)

• Material UI
• Bulma
• Ant Design
• Chakra UI
• Blueprint
• Evergreen
• PrimeReact
• Grommet
• Element Plus
• Quasar Framework
• Vuetify
• Materialize
• Skeleton
• Semantic UI

Brands:

• GitHub Primer
• Microsoft Fluent UI
• Altassian Design System AtlasKit
• MongoDB LeafyGreen UI Kit
• Adobe React Spectrum
• Shopify Polaris
• IBM Carbon Design System

Frameworks that style readonly:

• Pure.css
• Foundation (buggy like Bootstrap < 1.3.0)

Considering all this, I suggest that Bootstrap readonly input should not be styled as disabled input.

[alecpl]

Related issue #33860.

[alecpl]

@mdo I think this ticket was a feature request "Remove readonly state styles completely from Bootstrap". So, it deserves a comment. Could you re-consider this? It would not happen before v6 anyway, I guess, but was that ever considered?

Edit: Sorry, I wrote this comment thinking the ticket has been closed. That's why I used past tense.

[tkrotoff]

@XhmikosR this feature request is not related to #33961 and should not be closed because of it. Please re-read.

[XhmikosR]

@mdo had linked this in #33961, thus it was automatically closed.

[tkrotoff]

@mdo can you re-open this ticket for v6?