CSS中的自定义样式进度栏 [英] Custom styling progress bar in CSS

问题描述

我有一个进度栏，我想将其样式设置为不使用默认样式.

I have a progress bar and i want to style it away from default.

我尝试了一些操作，但是没有按预期工作.

I tried bit of things but it didn't work as I expected.

我想更改进度条的背景颜色和边框半径.

I want to change the background color and border radius of the progress bar.

设置背景颜色后，它会从默认的蓝色变为绿色，而不是我设置的颜色.

When I set the background color, it changes from the default blue to green color and not to the color I set.

<progress class="amount-progress" value="60500" max="120000">70 %</progress>

您可以看到小提琴.

当我设置background-color时，颜色从蓝色更改为绿色，必须更改为其他蓝色.

When i set the background-color the color changes from blue to green which has to change to a different blue.

我希望进度条具有平滑的边缘.

And i want the progress bar to have a smooth edge.

我确实设置了border-radius，但这也没有解决.

I did set border-radius but this also didn't work out.

.amount-progress{
    width: 80%;
margin-left: -11.5%;
height: 22px;
background-color: #0091EA;

}

推荐答案

您必须使用HTML5进度条的工具包.这些是样式HTML5进度条的全部选择器:

You have to work with the kit of HTML5 progress bar.These are currently the entire selectors for styling HTML5 progress bar:

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>

要记住的一件事是，进度条有两种类型:确定和确定.如果使用上面的方法，则将同时更改两者的样式.如果您只想更改确定条的样式，则可以执行以下操作.如果您想为不确定的进度栏设置不同的样式(例如，使用圆形微调器或类似的东西)，这很有用.

One thing to keep in mind is that there are two types of progress bars: indeterminate and determinate. If you use the above you will be changing the style for both. If you only want to change the style for a determinate bar you can do the below. This is useful if you want to style the indeterminate progress bar different, for example with a rounded spinner or anything like that.

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>

这篇关于CSS中的自定义样式进度栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！