CSS meter styling
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.
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 accountSign in
Already have an account? Sign in here.
Sign In Now