I have a class in my module.css file that looks like this

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

This works when the input is not disabled. The color of yyyy is set to transparent.

When the input is disabled the color is set back to the default color that Google Chrome has for that field.

Here is what I have tried without success:

.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;
}

How can I target the datetime-edit-year-field when the input is disabled?

CodePudding user response：

Try this. If the field is disabled it doesn't matter the range.

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

CodePudding user response：

I found the answer to my question after some trial and error. The solution wasn't obvious at first and it was found by placing the :disabled selector in random places till it worked properly.

.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;
}

In order these classes change the color to transparent for these elements:

1. Year - YYYY
2. Month - MM
3. Day - DD
4. Separator text - /

Edit: Removed the extra :disabled selector as pointed out by @Azu