dropbox / zxcvbn

Low-Budget Password Strength Estimation
https://www.usenix.org/conference/usenixsecurity16/technical-sessions/presentation/wheeler
MIT License
14.98k stars 932 forks source link

No colors in Chrome #253

Closed Jay-Way closed 5 years ago

Jay-Way commented 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

Jay-Way commented 5 years ago

Ah alright, I got it working, I just removed -webkit-appearance: none; from the meter {...} style rules