如何使用 css 在禁用的输入上定位 Google Chrome 的 webkit-datetime-edit-year-field？

Question

我的 module.css 文件中有一个 class，看起来像这样

.field input[type='date']:in-range::-webkit-datetime-edit-year-field {
  color: transparent;
}

这在输入未禁用时有效。 yyyy的颜色设置为透明

禁用输入后，颜色将设置回 Google Chrome 为该字段设置的默认颜色。

这是我尝试过但没有成功的方法：

.field input:disabled[type='date']:in-range::-webkit-datetime-edit-year-field {
  color: transparent;
}

.field input[type='date']:disabled:in-range::-webkit-datetime-edit-year-field {
  color: transparent;
}

.field
  input[type='date']:in-range::-webkit-datetime-edit-year-field:disabled {
  color: transparent;
}

如何在禁用输入时定位日期时间编辑年份字段？

Answer 1

经过反复试验，我找到了问题的答案。解决方案起初并不明显，通过将 :disabled 选择器放置在随机位置直到它正常工作才找到它。

.field
  input[type='date']:disabled::-webkit-datetime-edit-year-field {
  color: transparent;
}
.field
  input[type='date']:disabled::-webkit-datetime-edit-month-field {
  color: transparent;
}
.field
  input[type='date']:disabled::-webkit-datetime-edit-day-field {
  color: transparent;
}
.field
  input[type='date']:disabled::-webkit-datetime-edit-text {
  color: transparent;
}

为了这些类将这些元素的颜色更改为透明：

年 - YYYY
月 - 月
日 - DD
分隔符文本 - /

编辑：删除了额外的 :disabled 选择器，正如@Azu

所指出的

Answer 2

试试这个。如果该字段被禁用，则范围无关紧要。

input[type='date']:disabled::-webkit-datetime-edit-year-field {
  color: transparent;
}

如何使用 css 在禁用的输入上定位 Google Chrome 的 webkit-datetime-edit-year-field？

How can I target Google Chrome's webkit-datetime-edit-year-field on a disabled input using css?

html

css

google-chrome