Closed Jay-Way closed 5 years ago
Hey all,
I am experiencing a small issue while testing the strength meter, I have it working in Firefox but noticed while testing in different browsers that I get no colors / no change on the meter element while using Chrome. Firefox and Safari works fine.
Here is my CSS file:
meter { /* Reset the default appearance */ -webkit-appearance: none; -moz-appearance: none; appearance: none; margin: 0 auto 1em; width: 100%; height: 0.5em; /* Applicable only to Firefox */ background: none; background-color: rgba(0, 0, 0, 0.1); } meter::-webkit-meter-bar { background: none; background-color: rgba(0, 0, 0, 0.1); } /* Webkit based browsers */ meter[value="1"]::-webkit-meter-optimum-value { background: red; } meter[value="2"]::-webkit-meter-optimum-value { background: yellow; } meter[value="3"]::-webkit-meter-optimum-value { background: orange; } meter[value="4"]::-webkit-meter-optimum-value { background: green; } /* Gecko based browsers */ meter[value="1"]::-moz-meter-bar { background: red; } meter[value="2"]::-moz-meter-bar { background: yellow; } meter[value="3"]::-moz-meter-bar { background: orange; } meter[value="4"]::-moz-meter-bar { background: green; }
Anyone managed to fix it for chrome? If more code is required let me know but I guess the css file is the culprit.
Thanks
Ah alright, I got it working, I just removed -webkit-appearance: none; from the meter {...} style rules
-webkit-appearance: none;
meter {...}
Hey all,
I am experiencing a small issue while testing the strength meter, I have it working in Firefox but noticed while testing in different browsers that I get no colors / no change on the meter element while using Chrome. Firefox and Safari works fine.
Here is my CSS file:
Anyone managed to fix it for chrome? If more code is required let me know but I guess the css file is the culprit.
Thanks