我有一个进度条,我想将其样式设置为远离默认值。
我尝试了一些东西,但没有达到我的预期。
我想更改进度条的背景颜色和边框半径。
当我设置背景颜色时,它从默认的蓝色变为绿色,而不是我设置的颜色。
<progress class="amount-progress" value="60500" max="120000">70 %</progress>
你可以看到小提琴。
当我设置
background-color
时,颜色从蓝色变为绿色,必须更改为不同的蓝色。
我希望进度条有一个平滑的边缘。
我确实设置了
border-radius
但这也没有成功。
.amount-progress {
width: 80%;
margin-left: -11.5%;
height: 22px;
background-color: #0091EA;
}
您必须使用 HTML5 进度条套件。这些是目前用于设计 HTML5 进度条样式的完整选择器:
progress {
/* style rules */
}
progress::-webkit-progress-bar {
/* style rules */
}
progress::-webkit-progress-value {
/* style rules */
}
progress::-moz-progress-bar {
/* style rules */
}
所以:
progress {
border-radius: 7px;
width: 80%;
height: 22px;
margin-left: -11.5%;
box-shadow: 1px 1px 4px rgba( 0, 0, 0, 0.2 );
}
progress::-webkit-progress-bar {
background-color: yellow;
border-radius: 7px;
}
progress::-webkit-progress-value {
background-color: blue;
border-radius: 7px;
box-shadow: 1px 1px 5px 3px rgba( 255, 0, 0, 0.8 );
}
progress::-moz-progress-bar {
/* style rules */
}
<progress value="3333" max="10000">33%</progress>
要记住的一件事是,有两种类型的进度条:不确定和确定。如果您使用上述内容,您将更改两者的样式。如果您只想更改确定栏的样式,可以执行以下操作。如果您想将不确定的进度条设置为不同的样式,例如使用圆形微调器或类似的东西,这非常有用。
progress {
display: block;
}
/* Determinate: */
progress[value] {
/* style rules */
}
progress[value]::-webkit-progress-bar {
/* style rules */
}
progress[value]::-webkit-progress-value {
/* style rules */
}
progress[value]::-moz-progress-bar {
/* style rules */
}
/* Indeterminate: */
progress:not([value]) {
/* style rules */
}
progress:not([value])::-webkit-progress-bar {
/* style rules */
}
progress:not([value])::-webkit-progress-value {
/* style rules */
}
progress:not([value])::-moz-progress-bar {
/* style rules */
}
<p>Determinate:</p>
<progress value="66" max="100">Determinate</progress>
<p>Indeterminate:</p>
<progress>Indeterminate</progress>
注意:当你第一次实现只是进度时,你可能会看到奇怪的绿色灰色进度条,但如果你实现
进度::-webkit-进度条
和
进度::-webkit-进度-值
您会看到一切开始按预期工作
progress {
accent-color:red;
background-color:tomato;//mozilla
//Get rid of website stylesheet
//Weird green grey progressbar
-webkit-appearence:none;
}
//Set the background color for progress
progress::-webkit-progress-bar
{background-color:tomato;}
// set the progress value color
progress::-webkit-progress-value
{background-color:red;}
//设置FF的进度值颜色 进度::-moz-进度条 {背景颜色:红色;}