css - 如何在 Metro Apps 中对输入范围的左侧部分进行样式化？

Question

我目前正在尝试在我的 Metro 应用程序之一中对输入类型范围进行样式化。但是，我找不到如何更改控件左侧的默认蓝色/紫色。任何的想法？

我使用以下 CSS 成功更改了标记和右侧部分的颜色：

html input[type=range]::-ms-track {
  background: yellow;
}

html input[type=range]::-ms-thumb {
  background: red;
}

所以，我想一定有类似的东西。但是什么？：/

Answer 1

您可以使用这些 CSS 类来设置范围控件左侧的颜色样式：

input[type=range]::-ms-fill-lower {
    background-color: rgb(0, 130, 135); /* same in dark and light */
}
input[type=range]:hover::-ms-fill-lower {
    background-color: rgb(33, 146, 151); /* same in dark and light */
}
input[type=range]:active::-ms-fill-lower {
    background-color: rgb(37, 187, 196); /* same in dark and light */
}
input[type=range]:disabled::-ms-fill-lower {
    background-color: rgba(255, 255, 255, 0.24);
}
.win-ui-light input[type=range]:disabled::-ms-fill-lower {
    background-color: rgba(0, 0, 0, 0.24);
}

请注意，以上是默认值，您必须用您的颜色覆盖它们。

如果要查找控件的其他颜色设置或不同的控件，请在 dark-ui.css 文件中搜索控件的类型。每个控件都有一个带有颜色的单独部分