不确定的<progress>-标记的自定义颜色
不确定的<progress>-标记的自定义颜色
提问于 2016-06-28 15:51:23
我想写一个所谓的“不确定”-进步栏。(没有值的<progress>-tag )
<progress max="100"></progress>以我在网上找到的代码为例(不是我的)：
http://codepen.io/anon/pen/mEWqer
差别应该是显而易见的。没有任何样式的默认栏中有移动。我想做的事，风格，不确定的进度栏，使它保持‘移动’像上述。
任何方式的造型总是导致‘完全’填充酒吧，没有移动的部分。
我是不是做错了什么，这是预期的还是错误的？因为我不太擅长css，所以我在这里有点不知所措。互联网--就我所发现的信息而言--只谈论正常进度栏的造型。
编辑:现在我更困惑了。它似乎在边缘..。(圆点似乎是边缘的默认“进度条”)。那么，一只虫子？从边缘看到附加的图像。
编辑2:所有建议的答案都是为了一个确定的进度条。看看我提供的代码(“默认”栏)，应该很清楚，我指的是一个不确定的进度条。
回答 4
Stack Overflow用户
回答已采纳
发布于 2016-07-06 07:32:55
对我来说好像是个虫子..。当您尝试在其上应用一些样式时，无论是否在标记中存在value，Chrome似乎都会像定义的那样定义进度条。我也试过用Chrome金丝雀，但也是一样的。
想一想“去死吧你的移动项目，我会用我自己的风格抹去你”，这可能是个好主意。但很明显，
动画似乎不再适用于进度元素中的伪元素，在眨眼中。在这篇文章发表的时候，他们做到了。Brian LePore向我报告了这一点，并将我指向这个线程，讨论它，并创建了一个简化的测试用例。
-
也许在Shadow DOM之外定义的@keyframes不能被内部的元素访问，这也是一样的。从时间上看，它可能改变了铬39/40？
https://css-tricks.com/html5-progress-element/#article-header-id-5
所以我试过了，但是是的，动画不再有效了.
*,
*:before,
*:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html {
font-family: Helvetica, Arial, sans-serif;
font-size: 100%;
background: #333;
}
#page-wrapper {
width: 640px;
background: #FFFFFF;
padding: 1em;
margin: 1em auto;
border-top: 5px solid #69c773;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}
h1 {
margin-top: 0;
}
progress {
width: 100%;
}
.styled progress {
/* Reset the default appearance */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
height: 15px;
/* Firefox */
border: none;
background: #EEE;
border-radius: 3px;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2) inset;
}
/* lest apply somes styles on it */
.styled progress:not([value])::-webkit-progress-bar {
background: blue;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2) inset;
border-radius: 3px;
background-image:
-webkit-linear-gradient(-45deg,
transparent 33%, rgba(0, 0, 0, .1) 33%,
rgba(0,0, 0, .1) 66%, transparent 66%),
-webkit-linear-gradient(top,
rgba(255, 255, 255, .25),
rgba(0, 0, 0, .25)),
-webkit-linear-gradient(left, #09c, #f44);
-webkit-animation: animate-stripes 5s linear infinite;
animation: animate-stripes 5s linear infinite;
}
/* this seems to does not work anymore */
@-webkit-keyframes animate-stripes {
100% { background-position: -100px 0px; }
}
@keyframes animate-stripes {
100% { background-position: -100px 0px; }
}
.styled progress::-webkit-progress-value {
background-color: blue;
border-radius: 3px;
}
.styled progress::-moz-progress-bar {
background-color: blue;
border-radius: 3px;
}<div id="page-wrapper">
<p>Default</p>
<p>
<progress max="100"></progress>
</p>
<p>Styled defined</p>
it does not move:
<p class="styled">
<progress max="100" value="50"></progress>
</p>
<p>Styled defined</p>
this should move:
<p class="styled">
<progress max="100"></progress>
</p>
Stack Overflow用户
发布于 2016-06-28 16:03:29
您好，您的意思是使用overflow:hidden样式吗？要是那样就好了
Stack Overflow用户
发布于 2016-07-01 12:47:25
HTML
<p style="width:60%" data-value="60">CSS3</p>
<progress max="100" value="60" class="css3">
<!-- Browsers that support HTML5 progress element will ignore the html inside `progress` element. Whereas older browsers will ignore the `progress` element and instead render the html inside it. -->
<div class="progress-bar">
<span style="width: 60%">60%</span>
</div>
</progress>CSS
HTML CSS Result
Edit on
@import url(http://fonts.googleapis.com/css?family=Expletus+Sans);
/* Basic resets */
* {
margin:0; padding:0;
box-sizing: border-box;
}
body {
margin: 50px auto 0;
max-width: 800px;
font-family: "Expletus Sans", sans-serif;
}
li {
width: 50%;
float: left;
list-style-type: none;
padding-right: 5.3333333%;
}
li:nth-child(even) { margin-bottom: 5em;}
h2 {
margin: 0 0 1.5em;
border-bottom: 1px solid #ccc;
padding: 0 0 .25em;
}
/* Styling an indeterminate progress bar */
progress:not(value) {
/* Add your styles here. As part of this walkthrough we will focus only on determinate progress bars. */
}
/* Styling the determinate progress element */
progress[value] {
/* Get rid of the default appearance */
appearance: none;
/* This unfortunately leaves a trail of border behind in Firefox and Opera. We can remove that by setting the border to none. */
border: none;
/* Add dimensions */
width: 100%; height: 20px;
/* Although firefox doesn't provide any additional pseudo class to style the progress element container, any style applied here works on the container. */
background-color: whiteSmoke;
border-radius: 3px;
box-shadow: 0 2px 3px rgba(0,0,0,.5) inset;
/* Of all IE, only IE10 supports progress element that too partially. It only allows to change the background-color of the progress value using the 'color' attribute. */
color: royalblue;
position: relative;
margin: 0 0 1.5em;
}
/*
Webkit browsers provide two pseudo classes that can be use to style HTML5 progress element.
-webkit-progress-bar -> To style the progress element container
-webkit-progress-value -> To style the progress element value.
*/
progress[value]::-webkit-progress-bar {
background-color: whiteSmoke;
border-radius: 3px;
box-shadow: 0 2px 3px rgba(0,0,0,.5) inset;
}
progress[value]::-webkit-progress-value {
position: relative;
background-size: 35px 20px, 100% 100%, 100% 100%;
border-radius:3px;
/* Let's animate this */
animation: animate-stripes 5s linear infinite;
}
@keyframes animate-stripes { 100% { background-position: -100px 0; } }
/* Let's spice up things little bit by using pseudo elements. */
progress[value]::-webkit-progress-value:after {
/* Only webkit/blink browsers understand pseudo elements on pseudo classes. A rare phenomenon! */
content: '';
position: absolute;
width:5px; height:5px;
top:7px; right:7px;
background-color: white;
border-radius: 100%;
}
/* Firefox provides a single pseudo class to style the progress element value and not for container. -moz-progress-bar */
progress[value]::-moz-progress-bar {
/* Gradient background with Stripes */
background-image:
-moz-linear-gradient( 135deg,
transparent,
transparent 33%,
rgba(0,0,0,.1) 33%,
rgba(0,0,0,.1) 66%,
transparent 66%),
-moz-linear-gradient( top,
rgba(255, 255, 255, .25),
rgba(0,0,0,.2)),
-moz-linear-gradient( left, #09c, #f44);
background-size: 35px 20px, 100% 100%, 100% 100%;
border-radius:3px;
/* Firefox doesn't support CSS3 keyframe animations on progress element. Hence, we did not include animate-stripes in this code block */
}
/* Fallback technique styles */
.progress-bar {
background-color: whiteSmoke;
border-radius: 3px;
box-shadow: 0 2px 3px rgba(0,0,0,.5) inset;
/* Dimensions should be similar to the parent progress element. */
width: 100%; height:20px;
}
.progress-bar span {
background-color: royalblue;
border-radius: 3px;
display: block;
text-indent: -9999px;
}
p[data-value] {
position: relative;
}
/* The percentage will automatically fall in place as soon as we make the width fluid. Now making widths fluid. */
p[data-value]:after {
content: attr(data-value) '%';
position: absolute; right:0;
}
.html5::-webkit-progress-value,
.python::-webkit-progress-value {
/* Gradient background with Stripes */
background-image:
-webkit-linear-gradient( 135deg,
transparent,
transparent 33%,
rgba(0,0,0,.1) 33%,
rgba(0,0,0,.1) 66%,
transparent 66%),
-webkit-linear-gradient( top,
rgba(255, 255, 255, .25),
rgba(0,0,0,.2)),
-webkit-linear-gradient( left, #09c, #f44);
}
.css3::-webkit-progress-value,
.php::-webkit-progress-value
{
/* Gradient background with Stripes */
background-image:
-webkit-linear-gradient( 135deg,
transparent,
transparent 33%,
rgba(0,0,0,.1) 33%,
rgba(0,0,0,.1) 66%,
transparent 66%),
-webkit-linear-gradient( top,
rgba(255, 255, 255, .25),
rgba(0,0,0,.2)),
-webkit-linear-gradient( left, #09c, #ff0);
}
.jquery::-webkit-progress-value,
.node-js::-webkit-progress-value
{
/* Gradient background with Stripes */
background-image:
-webkit-linear-gradient( 135deg,
transparent,
transparent 33%,
rgba(0,0,0,.1) 33%,
rgba(0,0,0,.1) 66%,
transparent 66%),
-webkit-linear-gradient( top,
rgba(255, 255, 255, .25),
rgba(0,0,0,.2)),
-webkit-linear-gradient( left, #09c, #690);
}
/* Similarly, for Mozillaa. Unfortunately combining the styles for different browsers will break every other browser. Hence, we need a separate block. */
.html5::-moz-progress-bar,
.php::-moz-progress-bar {
/* Gradient background with Stripes */
background-image:
-moz-linear-gradient( 135deg,
transparent,
transparent 33%,
rgba(0,0,0,.1) 33%,
rgba(0,0,0,.1) 66%,
transparent 66%),
-moz-linear-gradient( top,
rgba(255, 255, 255, .25),
rgba(0,0,0,.2)),
-moz-linear-gradient( left, #09c, #f44);
}
.css3::-moz-progress-bar,
.php::-moz-progress-bar {
{
/* Gradient background with Stripes */
background-image:
-moz-linear-gradient( 135deg,
transparent,
transparent 33%,
rgba(0,0,0,.1) 33%,
rgba(0,0,0,.1) 66%,
transparent 66%),
-moz-linear-gradient( top,
rgba(255, 255, 255, .25),
rgba(0,0,0,.2)),
-moz-linear-gradient( left, #09c, #ff0);
}
.jquery::-moz-progress-bar,
.node-js::-moz-progress-bar {
/* Gradient background with Stripes */
background-image:
-moz-linear-gradient( 135deg,
transparent,
transparent 33%,
rgba(0,0,0,.1) 33%,
rgba(0,0,0,.1) 66%,
transparent 66%),
-moz-linear-gradient( top,
rgba(255, 255, 255, .25),
rgba(0,0,0,.2)),
-moz-linear-gradient( left, #09c, #690);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38080861
复制相关文章
相似问题
腾讯云开发者
