背景颜色输入CSS专用性问题

Question

我正在尝试应用input:read-only样式，但它并没有覆盖input的默认设置，至少在Chrome中是这样。

​

​

我已经检查了laws of CSS的优先级(和used this)，所有这些都表明只读定义优先。然而，在上图中，您可以看到浏览器没有使用这些样式。

我的代码是

​

body {
   font-family: 'Helvetica Neue', Helvetica, Arial, 'sans-serif';
   font-size: 14px;
   font-weight: 300;
}
input:read-only {
   background-color: -internal-light-dark(rgb(220, 220, 220), rgb(59, 59, 59)) !important;
   border-color: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133)) !important;
}
input {
   padding: 5px;
   font-weight: 300;
   font-family: 'Helvetica Neue', Helvetica, Arial, 'sans-serif';
   font-size: 14px;
   width: 100%;
}

<input type="text" value='read only text' readonly>
<input type="text">

​

你知道我错过了什么吗？

Answer 1

不要使用Chrome的-内部-亮-暗，尽量使用简单的方式。

​

input:read-only {
   background-color: rgb(220, 220, 220);
   border-color: rgb(118, 118, 118);
}

<input readonly>

​

如果它不能正常工作，请尝试在HTML中放入一个类e.g.color以解决特定问题。

​

.color {
   background-color: rgb(220, 220, 220);
   border-color: rgb(118, 118, 118);
}

<input readonly class="color">

​

Answer 2

请尝试下面提到的代码

​

body {
   font-family: 'Helvetica Neue', Helvetica, Arial, 'sans-serif';
   font-size: 14px;
   font-weight: 300;
}
input:read-only {
   border-image:linear-gradient(0deg, rgba(118,118,118,1) 0%, rgba(113,113,113,0) 100%);;
  background: linear-gradient(0deg, rgb(220, 220, 220) 0%, rgb(59, 59, 59) 100%);
}
input {
   padding: 5px;
   font-weight: 300;
   font-family: 'Helvetica Neue', Helvetica, Arial, 'sans-serif';
   font-size: 14px;
   width: 50%;
}

<input type="text" readonly>
<input type="text">

​