Jump to content

CSS meter styling

stefanmz
Go to solution Solved by bredy,
meter{
	width: 138px;
	height: 35px;
    border: 1px solid #ccc;
    border-radius: 0px;
}
meter::-webkit-meter-bar {
  background: none; 
  background-color: whiteSmoke;
  box-shadow: 0 5px 5px -5px #333 inset;
  border-radius: 0px;
  height: 35px;
  width: 100%;
}
meter::-webkit-meter-optimum-value {
	box-shadow: 0 5px 5px -5px #999 inset;
	background: -webkit-linear-gradient(top, #ad7, #ad7, #cea 20%, #7a3 45%, #7a3 55%);
}

 

Use something like this. The problem was the use of -webkit-appearence as the browser will not render it as a progress bar anymore.

Change the gradient to your liking and add your positioning again.

So I want my meter in Chrome to look like this(the mac one):

meter.png

however I found a tutorial but this just gives me a blank meter(the outline matches but it's blank even though it has a value) ,so how do I do it?

meter{
	position: relative;
	bottom: 148px;
	right: 165px;
	width: 138px;
	height: 35px;
    -webkit-appearance: none; 
    border: 1px solid #ccc;
    border-radius: 3px;
}
meter::-webkit-meter-bar {
  background: none; 
  background-color: whiteSmoke;
  box-shadow: 0 5px 5px -5px #333 inset;
}
meter::-webkit-meter-optimum-value {
	box-shadow: 0 5px 5px -5px #999 inset;
	background-color: rgba(122,173,55,255)
}

 

Link to comment
Share on other sites

Link to post
Share on other sites

Would be helpful if you could provide the HTML that this is styling, as well

____________________________________________________________________________________________________________________________________

 

 

____________________________________________________________________________________________________________________________________

pythonmegapixel

into tech, public transport and architecture // amateur programmer // youtuber // beginner photographer

Thanks for reading all this by the way!

By the way, my desktop is a docked laptop. Get over it, No seriously, I have an exterrnal monitor, keyboard, mouse, headset, ethernet and cooling fans all connected. Using it feels no different to a desktop, it works for several hours if the power goes out, and disconnecting just a few cables gives me something I can take on the go. There's enough power for all games I play and it even copes with basic (and some not-so-basic) video editing. Give it a go - you might just love it.

Link to comment
Share on other sites

Link to post
Share on other sites

57 minutes ago, pythonmegapixel said:

Would be helpful if you could provide the HTML that this is styling, as well

.....
<figure id="meter">
				<label>Profile completed 60%</label>
				<meter value="60" min="0" max="100"></meter>
			</figure>
		</main>
	</div>.......

 

Link to comment
Share on other sites

Link to post
Share on other sites

meter{
	width: 138px;
	height: 35px;
    border: 1px solid #ccc;
    border-radius: 0px;
}
meter::-webkit-meter-bar {
  background: none; 
  background-color: whiteSmoke;
  box-shadow: 0 5px 5px -5px #333 inset;
  border-radius: 0px;
  height: 35px;
  width: 100%;
}
meter::-webkit-meter-optimum-value {
	box-shadow: 0 5px 5px -5px #999 inset;
	background: -webkit-linear-gradient(top, #ad7, #ad7, #cea 20%, #7a3 45%, #7a3 55%);
}

 

Use something like this. The problem was the use of -webkit-appearence as the browser will not render it as a progress bar anymore.

Change the gradient to your liking and add your positioning again.

Link to comment
Share on other sites

Link to post
Share on other sites

21 hours ago, bredy said:

meter{
	width: 138px;
	height: 35px;
    border: 1px solid #ccc;
    border-radius: 0px;
}
meter::-webkit-meter-bar {
  background: none; 
  background-color: whiteSmoke;
  box-shadow: 0 5px 5px -5px #333 inset;
  border-radius: 0px;
  height: 35px;
  width: 100%;
}
meter::-webkit-meter-optimum-value {
	box-shadow: 0 5px 5px -5px #999 inset;
	background: -webkit-linear-gradient(top, #ad7, #ad7, #cea 20%, #7a3 45%, #7a3 55%);
}

 

Use something like this. The problem was the use of -webkit-appearence as the browser will not render it as a progress bar anymore.

Change the gradient to your liking and add your positioning again.

oh my,you actually did it, you are awesome! Thanks a lot! it works perfectly now,here is the finished version you deserve to see it

meter{
	position: relative;
	bottom: 148px;
	right: 165px;
	width: 138px;
	height: 30px;
    border-radius: 0px;
}
meter::-webkit-meter-bar {
  background: none; 
  background: -webkit-linear-gradient(bottom,#dadada,#dadada,#d4d4d4 20%,#cccccc 45%,#cccccc 55%,#ececec,#e2e3e3);
  border-radius: 0px;
  height: 20px;
  width: 160px;
  border: 1px;
}
meter::-webkit-meter-optimum-value {
	background: -webkit-linear-gradient(top, #ad7, #ad7, #cea 20%, #7a3 45%, #7a3 55%,#a2d56d);
}

 

Link to comment
Share on other sites

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×