Тег <meter>в последней версии Opera - PullRequest
Новая
       23

Тег <meter>в последней версии Opera

2 голосов
/ 29 августа 2011

В настоящее время я пытаюсь стилизовать тег <meter> во всех основных браузерах: IE7-9, FF, Chrome, Safari и даже Opera.Мне удалось удалить стиль по умолчанию <meter>, используя следующий код CSS: 

meter::-webkit-meter-bar, meter::-webkit-meter-optimum-value, meter::-webkit-meter-suboptimum-value, meter::-webkit-meter-even-less-good-value {
  background: 0;
}

Этот метод отлично работает во всех упомянутых браузерах, кроме Opera!Он продолжает показывать зеленый индикатор по умолчанию.Любая идея о том, как "уничтожить" тег <meter> в Opera?

Ответы [ 2 ]

3 голосов
/ 09 сентября 2011

В Opera еще нет возможности стилизовать такие элементы.Есть предложение под названием Компонентная объектная модель , которое косвенно позволит нам делать такое оформление, когда оно находится в рабочем проекте, но мы не близки к нему.

В Webkit реализован метод, которого нет ни в одном стандарте, а просто предложение, и я не думаю, что так будет в будущем.Скорее всего, имена этих псевдоэлементов изменились бы.

0 голосов
/ 29 августа 2011

Прежде чем я начну: это не должно быть background: transparent; или background: inherit;?См. Свойство background в HTML Dog .

Я думаю, что вы неправильно понимаете.Селектор meter::-webkit-meter-bar вообще не должен влиять на IE, FF и Opera, поскольку часть -webkit является селектором для Webkit.Chrome и Safari используют Webkit в качестве движка рендеринга, но FF использует Gecko, Opera использует Presto и т. Д.

Для FF вам, вероятно, потребуется что-то вроде -moz-meter-bar ...
Для Opera я не знаю, Эта страница сообщества Opera , кажется, подразумевает, что префикс будет -o, а не -webkit или -moz.
Удачи.

Это также хорошая практика, чтобы включить«нормальный» селектор при добавлении таких правил.
(И если вам повезет, это может просто заставить его работать в Opera.) 

meter::-webkit-meter-bar,
meter::-webkit-meter-optimum-value,
meter::-webkit-meter-suboptimum-value,
meter::-webkit-meter-even-less-good-value,
meter::meter-bar,
meter::meter-optimum-value,
meter::meter-suboptimum-value,
meter::meter-even-less-good-value {
  background: transparent;
}
...