Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

jason limmm
jason limmm
8,009 Points
Posted by jason limmm
jason limmm
8,009 Points

i don't know how to style progress bar

body{
    background-color:#DEF3F1;
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
}
.flex{
    display:flex;
}
.form{
    border-radius: 5px;
    background-color:#FFF;
    min-width: 100px;
    max-width:800px;
    margin:0 auto;
    flex-direction: column;
}
#contents{
    margin: 0 auto;
}
progress[value]{
color:#6AD9A3;
background-color:#F3F6F9;
}

<!DOCTYPE html>

<html>
    <head>
        <title>Form</title>
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="flex form" id="name">
            <div id="contents">
                <h1>Tell us a little about yourself.</h1>
                <progress max="100" value="33.333">
            </div>
        </div>
    </body>
</html>

i don't really know how to style the progress bar i need help

1 Answer

Steven Parker
Steven Parker
231,271 Points
Steven Parker
Steven Parker
231,271 Points

Unfortunately, the styling of progress elements is not done consistently across different browser types. Most types browsers recognize a few unique properties and/or pseudo-elements that affect style but they may be limited. Chrome, for example, has an "accent-color" property that will set the value bar color, but not one for the background. A progress element is best used when you want the browser's default to be shown.

But before there was a <progress> we would use <div>s to create our own, styled as we wish, which you can still do.
For example:

  <div class="bar">
    <div id="myval"></div>
  </div>

.bar {
  width: 160px;
  border: 1px solid darkgray;
  border-radius: 5px;
  background-color: #F3F6F9;
}

#myval {
  height: 6px;
  width: 33%;
  background-color: #6AD9A3;
}