Redmine

Although it is a text box with disabled set, it is difficult to identify because the background color does not change.
(The cursor changes when you mouse over, so we can identify it.)

Below is the [Settings] > [Incoming emails] tab.
Disabled is set for [Incoming email WS API key], but it is difficult to identify that input is not possible because the background color does not change.

This is because the following style is set in application.css.

input, select, textarea, button { color: #333; background-color: #fff; border:1px solid #ccc; border-radius:3px; box-sizing: border-box;}

The background-color is #fff, but the background-color for disabled is not specified.

Suggested fix¶

There are two ways to fix this.

1. Add a style for disabled¶

The setting of "input:disabled, select:disabled, textarea:disabled" already exists, so add the background-color there.

input:disabled, select:disabled, textarea:disabled {
  cursor: not-allowed;
  color: graytext;
+  background-color: #ebebe4;
}

However, since there are various types of input, it is not clear whether there is no problem in specifying it uniformly like this.
It may be safer to specify only the required type, such as input[type="text"].

input[type="text"]:disabled,
input[type="password"]:disabled,
input[type="date"]:disabled,
input[type="number"]:disabled,
select:disabled,
textarea:disabled {
  background-color: #ebebe4;
}

2. Remove "background-color: #fff"¶

I think the need to reset the background-color is low.

- input, select, textarea, button { color: #333; background-color: #fff; border:1px solid #ccc; border-radius:3px; box-sizing: border-box;}
+ input, select, textarea, button { color: #333; border:1px solid #ccc; border-radius:3px; box-sizing: border-box;}

By not resetting, disabled will also be displayed in the default style.