Change the color of an HTML5 progress element

Navigation
2

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

ButifItrystylingwithcssitlookslikethis:

How can I leave the background (the gray and white part of the progress bar above) of one color and the percentage (the blue and gray parts of it) of another color? It does not have to be striped with many things, just wanted to change the color. What I want is something like this:

followtheHTMLcode:

<progressstyle="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;
  }
    
asked by anonymous 30.03.2014 / 14:47

2 answers

2

After a good researched, good even, I found a solution.

For value of the bar, just add 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 so on. You use% s of% itself.

    
30.03.2014 / 16:18
0

To remove the default appearance: 

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

To set the new look for the background: 

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 value appearance: 

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

>

    
10.03.2015 / 03:48
problem with regular expressions in php Masking for date field