disabled input textbox looks the same as a normal one

Teleopti / styleguide

Teleopti styleguide

http://teleopti.github.io/styleguide/

MIT License

5 stars 24 forks source link

Closed chukonu closed 6 years ago

chukonu commented 6 years ago

Currently, as the picture below shows, it is not possible to distinguish normal text inputs and disabled ones by just looking at them.

no apparent difference

The upper one is disabled while the lower one is normal.

TheRockman commented 6 years ago

Simply apply the helper class "locked" to the label and input depending on the disabled status. http://teleopti.github.io/styleguide/styleguide/section-8.html#kssref-8-2

This will gray out the text and make the label/input unable to receive focus/click/hover