禁用输入时具有背景透明度的 Safari 颜色 [英] Safari color with background transparency on disabled input

问题描述

当我在禁用输入上使用 css 颜色 #b3b3b3 时，它会变成白色??为什么会发生这种情况，我该如何解决?

看看这个小提琴:

解决方案

这是因为一个奇怪的错误.输入占位符文本一直是一个问题，因为似乎还没有所有浏览器都成功实现的标准.因此，在所有浏览器中轻松保持一致是一件很痛苦的事情.

但是，将 -webkit-text-fill-color 属性添加到您的 CSS 中，它就会起作用.它在 Chrome 中似乎没问题，因此添加它可以让它在 Safari 中也能很好地工作.

您的 CSS 将是...

.bug-color {颜色:#b3b3b3；-webkit-text-fill-color: #b3b3b3;}

MDN文档关于此属性和CanIUse 支持表.

When i use the css color #b3b3b3 on a disabled input it turns white?? why this is happening and how can i workaround?

Look at this fiddle: https://jsfiddle.net/esty6t20/

CSS:

.transp {
  background-color: transparent;
}
.bug-color {
  color: #b3b3b3;
}
.red-color {
  color: red;
}

HTML:

Disabled Bugged Gray

<input class="transp bug-color" value="test text" disabled>
<br/>
Disabled Red color
<input class="transp red-color" value="test text" disabled>
<br/>
Enabled Bugged Gray
<input class="transp bug-color" value="test text">

I already tried to force override the !important but with no success. Check the result:

解决方案

It's because of a weird bug. Input placeholder text has always been a bit of an issue because nothing seems to be a standard yet in which all browsers have successfully implemented just yet. So it's a pain to have it consistent across all browsers easily.

However, add the -webkit-text-fill-color property to your CSS and it'll work. It seems to be fine in Chrome so adding this will get it working nicely in Safari as well.

Your CSS would be...

.bug-color {
  color: #b3b3b3;
  -webkit-text-fill-color: #b3b3b3;
}

MDN documentation about this property and CanIUse support table.

这篇关于禁用输入时具有背景透明度的 Safari 颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！