移动端禁用input文本框文字变灰问题及CSS覆盖方案咨询

因功能需求，需在点击按钮时通过JavaScript为文本输入框（input）添加disabled属性，示例输入框代码如下：

<input class="input" value="1" readonly="" name="input-id-1234" disabled="" hidden="true">

添加disabled属性后，移动端输入框内文字变为灰色。尝试了以下CSS样式覆盖浏览器默认样式，但在移动端未生效：

input {
  border: none;
  text-align: center;
  width: 20px;
}
input:disabled {
  -webkit-appearance: none !important;
  opacity: 2 !important;
  color: black !important;
}
input:focus {
  outline: none;
}

对应HTML结构：

<div>
<input class="input" value="1" readonly="" name="input-id-1234" disabled="true">
</div>

## 解决方案
- **修正opacity取值**：你设置的`opacity: 2`无效，opacity的合法取值范围是0到1，改为`opacity: 1`才能让元素完全不透明，避免文字视觉上发灰。
- **提升样式优先级并适配移动端内核**：部分移动端浏览器对disabled元素的默认样式优先级较高，可通过类选择器提升权重，并补充WebKit内核专属样式：
```css
/* 结合类选择器提高样式优先级 */
.input:disabled,
.input[disabled] {
  -webkit-text-fill-color: black !important; /* 适配WebKit内核移动端浏览器 */
  color: black !important;
  opacity: 1 !important;
  -webkit-opacity: 1 !important;
}

• 业务允许的话，用readonly替代disabled：如果不需要阻止input值随表单提交（disabled会导致input值不被提交），可以只保留readonly属性并移除disabled，这样既能禁止编辑，又不会触发浏览器的灰化样式：

<input class="input" value="1" readonly="true" name="input-id-1234">

搭配CSS锁定样式：

.input[readonly] {
  color: black;
  /* 可选：添加禁止点击的交互提示 */
  pointer-events: none;
}

内容的提问来源于stack exchange，提问作者RandomDeveloper