CSS variables don't inherit into range input track, fill, thumb

Confirmed Issue #12837456 • Assigned to Greg W.

Details

Author
Ana T.
Created
Jul 19, 2017
Privacy
This issue is public.
Found in
  • Microsoft Edge
Found in build #
15.15063
Reports
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

Consider a range input in a wrapper:

<section>
  <input type="range"/>
</section>

Set a custom property on the wrapper and use it on the actual range input - this works as expected:

section {
  --base: #ff6f00;
}

input {
  border: solid 2px var(--base);
}

However, using the same custom property on the track, thumb, fill doesn’t work:

input::-ms-thumb, input::-ms-fill-lower {
  background: var(--base);
}
input::-ms-track {
  border: solid 2px var(--base);
}

We could set the color property on the range input to the --base custom property and then inherit it on the track, thumb and fill and use currentcolor instead. However, I often want to have the color property on the track set to transparent in order to remove the ticks.

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “James M.”

      Changed Assigned To to “Rick J.”

      Changed Assigned To to “Bogdan B.”

      Changed Assigned To from “Bogdan B.” to “Greg W.”

      Changed Status to “Confirmed”

    You need to sign in to your Microsoft account to add a comment.

    Sign in