相关疑难解决方法(0)
如何在HTML5进度条内显示数据标签跨浏览器兼容？
我有一个样式的HTML5进度条,我想在进度条跨浏览器兼容的情况下显示数据标签.目前它显示在进度条上方.
HTML:
<progress max="100" value="50" data-label="50% Complete"></progress>
CSS:
progress
{
text-align:center;
height: 1.5em;
width: 100%;
-webkit-appearance: none;
border: none;
}
progress:before {
content: attr(data-label);
font-size: 0.8em;
vertical-align: 0
}
progress::-webkit-progress-bar {
background-color: #c9c9c9;
}
progress::-webkit-progress-value {
background-color: #7cc4ff;
}
progress::-moz-progress-bar
{
background-color: #7cc4ff;
}
我得到以下结果(见图),但我想在进度条中移动数据标签:
非常感谢您的建议.
13
推荐指数
推荐指数
1
解决办法
解决办法
1万
查看次数
查看次数
使用CSS在栏上显示进度条的值(数字),如55%
我想在主体上显示进度条的值以及颜色.
我确实尝试使用下面的代码,但无法成功.有没有办法显示进度条或进度标签/元素正文的进度百分比.
<progress max="100" value="26"></progress><br/>
<progress max="100" value="26">26%</progress><br/>
<progress max="100" value="26"><span>26%</span></progress>7
推荐指数
推荐指数
1
解决办法
解决办法
8701
查看次数
查看次数
在iframe元素上使用:: before之前生成的内容选择器
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#test iframe {
border: none;
background: #333;
width: 500px;
height: 500px;
overflow: hidden;
}
#test iframe:before {
display: block;
content: " test";
width: 500px;
height: 500px;
background: url('overlay.png') no-repeat;
position: relative;
top: 0px;
left: 0px;
z-index: 999;
}
</style>
</head>
<body>
<div id="test">
<p><iframe></iframe></p>
</div>
</body>
</html>
我正在尝试将图像放在一个iframe但由于某种原因::before选择器不相处iframe- 尝试用iframe任何其他元素替换它并且它起作用.我需要iframe成为p元素的孩子.
6
推荐指数
推荐指数
1
解决办法
解决办法
3583
查看次数
查看次数
如何使用 bulma 将文本放入 HTML5 中的进度条中？
默认情况下，您在<progress></progress>标签之间放置的内容不会显示。
<progress class="progress" value="15" max="100">15%</progress>我如何才能显示 15%？我使用 Bulma 作为框架。
5
推荐指数
推荐指数
1
解决办法
解决办法
2088
查看次数
查看次数