gpt4 book ai didi

html - 如何设置 HTML5 标签的样式

转载 作者:技术小花猫 更新时间:2023-10-29 12:01:59 29 4
gpt4 key购买 nike

我想知道如何设计新的 <meter>标签。

<meter value=80 min=0 max=100>
80/100
</meter>

我只想更改背景颜色和值颜色,但找不到合适的 CSS 属性。对于基于 webkit 的浏览器,我发现了这些:

meter::-webkit-meter-horizontal-bar {
-webkit-appearance: meter;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#DDD), color-stop(0.2, #EEE), color-stop(0.45, #CCC), color-stop(0.55, #CCC), to(#DDD));
}
Pseudo element
meter::-webkit-meter-horizontal-optimum-value {
-webkit-appearance: meter;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#AD7), color-stop(0.2, #CEA), color-stop(0.45, #7A3), color-stop(0.55, #7A3), to(#AD7));
}
Pseudo element
meter::-webkit-meter-horizontal-suboptimal-value {
-webkit-appearance: meter;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FE7), to(#FE7), color-stop(0.2, #FFC), color-stop(0.45, #DB3), color-stop(0.55, #DB3));
}
Pseudo element
meter::-webkit-meter-horizontal-even-less-good-value {
-webkit-appearance: meter;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F77), to(#F77), color-stop(0.2, #FCC), color-stop(0.45, #D44), color-stop(0.55, #D44));
}
Pseudo element
meter::-webkit-meter-vertical-bar {
-webkit-appearance: meter;
background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#DDD), to(#DDD), color-stop(0.2, #EEE), color-stop(0.45, #CCC), color-stop(0.55, #CCC));
}
Pseudo element
meter::-webkit-meter-vertical-optimum-value {
-webkit-appearance: meter;
background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#AD7), to(#AD7), color-stop(0.2, #CEA), color-stop(0.45, #7A3), color-stop(0.55, #7A3));
}
Pseudo element
meter::-webkit-meter-vertical-suboptimal-value {
-webkit-appearance: meter;
background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#FE7), to(#FE7), color-stop(0.2, #FFC), color-stop(0.45, #DB3), color-stop(0.55, #DB3));
}
Pseudo element
meter::-webkit-meter-vertical-even-less-good-value {
-webkit-appearance: meter;
background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#F77), to(#F77), color-stop(0.2, #FCC), color-stop(0.45, #D44), color-stop(0.55, #D44));
}

我在哪里可以找到适用于基于 gecko 的浏览器 (Firefox)、Opera 和 IE 的正确 CSS 属性?

最佳答案

这是2019年的跨浏览器解决方案:

meter {
--background: #dadada;
--optimum: forestgreen;
--sub-optimum: gold;
--sub-sub-optimum: crimson;

/* The gray background in Firefox */
background: var(--background);
display: block;
margin-bottom: 1em;
width: 100%;
}

/* The gray background in Chrome, etc. */
meter::-webkit-meter-bar {
background: var(--background);
}

/* The green (optimum) bar in Firefox */
meter:-moz-meter-optimum::-moz-meter-bar {
background: var(--optimum);
}

/* The green (optimum) bar in Chrome etc. */
meter::-webkit-meter-optimum-value {
background: var(--optimum);
}

/* The yellow (sub-optimum) bar in Firefox */
meter:-moz-meter-sub-optimum::-moz-meter-bar {
background: var(--sub-optimum);
}

/* The yellow (sub-optimum) bar in Chrome etc. */
meter::-webkit-meter-suboptimum-value {
background: var(--sub-optimum);
}

/* The red (even less good) bar in Firefox */
meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
background: var(--sub-sub-optimum);
}

/* The red (even less good) bar in Chrome etc. */
meter::-webkit-meter-even-less-good-value {
background: var(--sub-sub-optimum);
}
<label>
Optimum
<meter value=80 min=0 low=30 high=60 max=100 optimum=80>
80/100
</meter>
</label>

<label>
Sub-optimum
<meter value=80 min=0 low=30 high=60 max=100 optimum=50>
80/100
</meter>
</label>

<label>
Sub-sub-optimum
<meter value=80 min=0 low=30 high=60 max=100 optimum=20>
80/100
</meter>
</label>

请注意,仪表的未填充(灰色)部分在 Chrome 中使用 ::-webkit-meter-bar 设置样式,而 firefox 使用 ::-moz-meter-bar 用于填充(绿色、黄色、红色)部分,并在其自身的 meter 元素下设置未填充部分的样式。

另请注意,firefox 在 meter 元素上有伪选择器,以区分最佳值和次优值(:-moz-optimal, :-moz -sub-optimal:-moz-sub-sub-optimal; 然后你只需设置 ::-moz-meter-bar 伪子元素的样式适当的伪选择器)而 Chrome 允许您为此目的设置不同的伪元素样式(::-webkit-meter-optimum-value, ::-webkit-meter-suboptimum-value::-webkit-meter-even-less-good-value 分别)。

这是一个链接,解释了这些带前缀的伪元素的含义。 https://scottaohara.github.io/a11y_styled_form_controls/src/meter/

关于html - 如何设置 HTML5 <meter> 标签的样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8094835/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com