0

I'm trying to use the meter as a password strength meter in my web page. In order to change the appearance, I set the css to

.passwordMeter {
    width: 300px;
    margin: 0 auto;
    height: 10px;
    -webkit-appearance: none;
}

.passwordMeter::-webkit-meter-bar {
    background: whitesmoke none;
}

The problem is when I include "-webkit-appearance: none;", the meter doesn't show up in chrome, and if I delete that, the appearance doesn't change in safari. How could I solve this?

Alex
  • 1
  • Possible duplicate of https://stackoverflow.com/questions/38622911/styling-meter-bar-for-mozilla-and-safari – Alexios Tsiaparas Jun 03 '17 at 21:23
  • According to [this bug report](https://bugs.chromium.org/p/chromium/issues/detail?id=632510) it sounds like the behaviour was deliberately introduced in Chrome to workaround a more pressing issue. I don't think there is a CSS fix - it's best not to rely on non-standard features if you require cross-browser compatibility. – Emissary Jun 04 '17 at 09:24
  • I have found a solution and postet it to: https://stackoverflow.com/questions/38622911/styling-meter-bar-for-mozilla-and-safari/72304567#72304567 The trick was to set border-color: transparent for the meter element, you can also use any other color it is not visible. – Andreas Riedmüller May 19 '22 at 12:30

0 Answers0