Changing the color of a HTML5 <Progress> element

Asked

Viewed 3,896 times

2

I need to change the color of a Progress bar (tag <progress> HTML5) with CSS. The default of Google Chrome is like this:

Barra padrão atual do google chrome

But if I try to style with css gets like this:

Minha tentativa

How can I leave the background (the grey and white part of the bar above) of one color and the percentage (the blue and gray parts of them) of another color? It doesn’t need to be striped with many things, just wanted to change the color. What I want is more or less like this:

aparência desejada

follows the HTML code:

 <progress  style="left: -162px; position: relative; z-index: 1; height: 26px; width: 160px" id="progress" min="0" step="32" max="158" value="50" ></progress>

css:

 progress {
  background-color: #ffffff;
  border: solid #808080 2px;
  border-radius: 5px;
  -moz-box-shadow: 3px 3px 3px #C0C0C0; 
  -webkit-box-shadow: 3px 3px 3px #C0C0C0;
  box-shadow: 3px 3px 3px #C0C0C0;
  padding: 3px;
  width: 250px;
  height: 20px;
  }
html css html5

  • Hello, you can put the ajax script ?

  • Samir without seeing your code is difficult to help. Put the code here pf.

  • Actually it is a simple pure javascript, in which I will do as a voting system with the bar, the script does not interfere anything.

  • Okay, I’ll edit.

  • Experiment border: 2px Solid #color; instead of that expression there.

  • The aim is the bottom of that right div ? Puts it with green background file ?

  • Hi Samir. Instead of entering the "solved" in the question, mark the correct answer by clicking on the "tick" symbol that is close to the answer score. Could be your own answer.

Show 2 more comments

2 answers

2


After a good search, really good, I found a solution.

To the value of the bar just add to the css:

#progresss::-webkit-progress-value {
background: -webkit-linear-gradient(top, #7db9e8 0%,#1e5799 100%); /* Chrome10+,Safari5.1+ */
}

And to the bottom:

 #progresss[value]::-webkit-progress-bar {
   background: #eeeeee;
   border-radius: 2px;
 }

And for size, borders, page location, position and etc. It is used itself progress{} even.

1

To remove the default appearance:

progress {
    display:block;
    -webkit-appearance: none;
}

To set the new background appearance: 

progress::-webkit-progress-bar {
    background: black;
    border-radius: 50px;
    padding: 2px;
}
progress::-moz-progress-bar {  
    background: black;
    border-radius: 50px;
    padding: 2px;
}

To set the new appearance of the value:

progress::-webkit-progress-value {
    border-radius: 50px;
    background:orange;
}

Source

Browser other questions tagged html css html5

You are not signed in. Login or sign up in order to post.