时间戳

首页 > 解决方案 > 背景颜色输入CSS特异性问题

css - 背景颜色输入CSS特异性问题

问题描述

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

在此处输入图像描述

我已经根据什么获得优先权（并使用了 this ）回顾了CSS 的法律，这一切都指向只读定义优先。然而，在上图中，您可以看到浏览器没有使用这些样式。

我的代码是

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">

关于我所缺少的任何想法？

标签： cssinputcss-selectors

解决方案

请尝试下面提到的代码

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">

推荐阅读