How to style progress bar using CSS

Question

I have been trying to style my progress bar for a while and it has proved impossible for me. Tried all sort of properties but none seem to have an effect on the bar.
Any help will be appreciated.

Answer 1

to make your own just put a div in another div, set the parent height as 20px (or whatever) then the child div height as 100% then the width as your progress, this way you have complete control over colors, borders, effects, then all you gotta do is use JavaScript to make it work

Answer 2

Sum Sum Guy, you can use these selectors:
progress::-webkit-progress-value
progress::-webkit-progress-bar

https://css-tricks.com/html5-progress-element/

Answer 3

There are some html tags that are soo hard wired...
the great css has no effect on them..
<progress><select> are one of such tags...
use something else..

Answer 4

I think y'all give up too easily.

Yes, there are compatibility issues, which makes it complicated. <meter></meter> might be a tad easier to implement.

Styling <progress>: https://css-tricks.com/html5-progress-element/

Styling <meter>: https://css-tricks.com/html5-meter-element/

I hope this helps! :)

Answer 5

I’ve always done select inputs and progress bars with div tags and javascript. You don’t always need to go with html standards. Sometimes you need to improvise.

Answer 6

thank you all, this proved to be a lil bit helpful.

Answer 7

does that mean there is an alternative for the progress tag?