一个奇怪的行为阻止我在 Mozilla Firefox 中为 HTML 输入元素的背景颜色(背景属性)设置白色(它切换到黄色)。其他颜色效果很好(黑色、绿色)。有人知道为什么吗?
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 1px solid #A6A6A633;
border-radius: 2px;
opacity: 1;
background: white;
color: #9B9B9B;
}
<div class="form-group">
<label for="username">User Name: </label>
<input type="text" id="username" [(ngModel)]="username" placeholder="Enter User Name" name="username">
</div>
编辑:由于事实证明问题是由 Mozilla 的自动完成引起的,因此它不再是问题,因为在正常使用中它会按预期更改背景。
最佳答案
在您的示例中,背景为纯白色。我认为,还有一些其他代码会影响您的输入。尝试使用 ID 使其更具体#用户名 .
或者,您可以使用 !important 规则。
更新
添加了第三种方式。它可能是 browther 的自动完成背景。试试下面的代码。
input#username {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 1px solid #A6A6A633;
border-radius: 2px;
opacity: 1;
background: #fff !important;
color: #9B9B9B;
}
input#username:-moz-autofill,
input#username:-moz-autofill-preview,
input#username:-webkit-autofill {
filter: none;
background: #fff !important;
}
<div class="form-group">
<label for="username">User Name: </label>
<input type="text" id="username" [(ngModel)]="username" placeholder="Enter User Name" name="username">
</div>
关于html - 无法在 Mozilla 中为 HTML 输入设置白色背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61129917/