當正文背景設置為黑色時，按鈕及其文本在禁用時會完全變灰，使其無法閱讀。這是在 Mac 上運行的，其他情況也可以在 PC 上運行。<!DOCTYPE html><html><body style="background-color:black"><input type='button' value='Test' disabled='true'/></body></html>這是我得到的：如果有人可以修復，請告訴我！為了回應 Pikesh 下面的答案，這里是應用樣式后的附加屏幕截圖：除了啟用/禁用之外，按鈕邊框和大小現在有所不同。
2 回答
不負相思意
TA貢獻1777條經驗 獲得超10個贊
如果按鈕處于禁用狀態，您可以覆蓋按鈕的樣式。
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>
慕森卡
TA貢獻1806條經驗 獲得超8個贊
這是 macOS 的錯誤...
瀏覽器使用按鈕的系統顏色?，因此操作系統決定使用什么顏色。在 macOS 上，通常為白色 ( )，禁用輸入時為半透明白色 ( )。?同樣，他們將 系統顏色設置為系統顏色，通常默認為黑色 (?)，禁用時默認為半透明黑色 (?)。?當 :active 時，顏色還有一種藍色漸變顏色的變化。ButtonFacebackground-color0xFFFFFFFF0xFFFFFF80colorButtonText0x000000000x00000033ButtonFace
這意味著當您的 <button> 被禁用時，操作系統實際上會降低其不透明度，當您的背景為黑色時，這確實是一個問題。
這是 macOS 用戶的小提琴：
body {
? background-image: linear-gradient(red, blue);
? background-size: 10px 10px;
}
<button disabled>disabled</button>
<button>enabled</button>
以及其他人的截圖。
正如您所看到的，禁用的按鈕實際上是透明的。
為了克服這個問題，您別無選擇，只能定義自己的樣式，因為它們使用半透明顏色，而不是opactiy您可以輕松覆蓋的顏色。盡管要注意，甚至邊框也會受到這些系統顏色的影響，并且由于其他操作系統可能對所有這些狀態有不同的行為，因此您可能必須為所有不同的狀態定義樣式，而不僅僅是禁用狀態。
PS：Chrome 瀏覽器的有趣事實。如果您確實更改了瀏覽器的縮放級別，那么它將停止使用系統顏色，并且顏色將不再是透明的。
- 2 回答
- 0 關注
- 150 瀏覽
添加回答
舉報
0/150
提交
取消