Когда фон тела установлен в черный цвет, кнопка и ее текст полностью отключены при отключении - PullRequest
Новая
       0

Когда фон тела установлен в черный цвет, кнопка и ее текст полностью отключены при отключении

1 голос
/ 26 марта 2020

Если фон тела установлен на черный, кнопка и ее текст полностью отключены, когда они отключены, что делает их нечитаемыми. Это на Ma c, а в остальном работает на P C. 

<!DOCTYPE html>
<html>
<body style="background-color:black">
<input type='button' value='Test' disabled='true'/>
</body>
</html>

Вот что я получаю: Here's what I'm getting

Если кто-то может исправить, пожалуйста, дайте мне знать!

В ответ на приведенный ниже ответ Прике sh, вот еще один скриншот после применения стиля:

Кроме включения / выключения, границы кнопки и Размер теперь другой.

Ответы [ 2 ]

1 голос
/ 26 марта 2020

Вы можете просто переопределить стили кнопки, если она находится в отключенном состоянии. 

input[type="button"]:disabled {
  color: #333;
}
<!DOCTYPE html>
<html>

<body style="background-color:black">
  <input type='button' value='Test' />
  <input type='button' value='Test' disabled='true' />
</body>

</html>
0 голосов
/ 27 марта 2020

Это ошибка macOS ...

Браузеры используют Системный цвет ButtonFace для кнопок background-color, поэтому ОС определяет, какой цвет используется. В macOS он белый (0xFFFFFFFF) обычно и полупрозрачный белый, когда вход отключен (0xFFFFFF80).
Аналогично они устанавливают color в системный цвет ButtonText по умолчанию черный (0x00000000) обычно и полупрозрачный черный при отключении (0x00000033).
Цвет ButtonFace также имеет другой вариант с градиентным цветом bluei sh, когда: активен .

Это означает, что когда ваш

Вот скрипка для пользователей MacOS : 

body {
  background-image: linear-gradient(red, blue);
  background-size: 10px 10px;
}
<button disabled>disabled</button>
<button>enabled</button>

И скриншот для других.

screenshot of the Snippet's result ran on macOS

Как видите, Отключенная кнопка на самом деле прозрачна.

Чтобы преодолеть это, у вас нет выбора, кроме как определить свои собственные стили, потому что они используют полупрозрачные цвета, а не opactiy, который вы могли бы легко перезаписать. Хотя имейте в виду, что эти системные цвета влияют даже на границы, и поскольку другие ОС могут иметь свое собственное поведение со всеми этими состояниями, вам, возможно, придется определить стили для всех различных состояний, а не только для отключенных.

PS: забавный факт для Chrome браузера. Если вы измените уровень масштабирования браузера, он перестанет использовать системный цвет, и цвет больше не будет прозрачным.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...