设置仪表元素

Question

我正在使用仪表元素来显示0到5之间的星级。我让它在Chrome上运行良好，在Firefox中还可以，但是在Safari中无法正常运行。

Here is a codepen

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

 meter {
   -webkit-appearance: none;
}

然后一切正常。但是，一旦这样做，它就会在Chrome中停止工作，因为Chrome只会在电表中渲染内容并停止完全显示它。有没有人解决这个问题？

P.S。另外，有人知道为什么我不能这样设置吗：

&::-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具有内置的米样式。

这就是为什么当您设置 none 时它停止工作的原因。希望Safari不会理解没有，不会理解米并且会保留第一种样式。

Answer 2

我已经采用了一种骇人听闻的方式，仅将Safari作为目标。这使我的仪表可以在Firefox，Safari和Chrome上运行。尚未弄清楚为什么我需要分离SELECT TABLE_NAME FROM INFORMATION_SCHEMA.TABLES WHERE TABLE_TYPE = 'BASE TABLE' AND TABLE_SCHEMA='dbName' 和-webkit样式。也许将来所有浏览器以相同的方式实现元素时，情况会更好。

-moz

Answer 3

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

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