meter element is incompatible between safari and chrome

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?