造型仪表元素

Question

我正在使用米元素来显示从0到5的星级。我在Chrome上运行得很好，在Firefox中没问题，但在Safari中无法正常工作。

Here is a codepen

对于Safari，要正确显示样式表，我必须添加

 meter {
   -webkit-appearance: none;
}

一切正常。但是，一旦这样做，它就会停止在Chrome中运行，因为Chrome只会在仪表内呈现内容并停止完全显示。有没有人得到这个？

附：另外，有谁知道为什么我不能这样设置它：

&::-webkit-meter-bar,
&::-webkit-meter-optimum-value,
&::-moz-meter-bar {
    //code here
  }

而是必须打破它？

&::-webkit-meter-bar,
&::-webkit-meter-optimum-value {
   //code here
}

&::-moz-meter-bar {
   // code here
} 

非常感谢，如果有人有任何见解:)

Answer 1

我无法在Safari上测试

但我会尝试以下（至少在Chrome中有效）

meter {
    -webkit-appearance: none;
    -webkit-appearance: meter;
}

Chrome具有内置式仪表。

这就是为什么当你没有设置它停止工作。希望Safari能够理解，不会理解仪表并保持第一种风格。

Answer 2

我已经采用hacky方式只针对Safari。这样我的样式表可以在Firefox，Safari和Chrome上运行。还没弄清楚为什么我需要分开-webkit和-moz风格。也许将来当所有浏览器以相同的方式实现元素时，事情会更好。

@media only screen and (-webkit-min-device-pixel-ratio: 1) {
    meter:not(:root:root) {
         appearance: none;
    }
}

Answer 3

我有同样的问题，这对我有用：

 -webkit-appearance: meter;
  -moz-appearance: none;
  appearance: none;