-webkit-appearance: none; doesn't work on Safari macOS

Question

I'm styling a form select button which I already set these:

.input-form select {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
...
}

HTML:

<form className="input-form" onSubmit={e => handleSubmit(e)}>
    <div className="select-domain">
        <label name="Select Domain">Select Domain</label>
        <select name="Select Domain" onChange={e => handleDomainChange(e)}>
            <option value="example.com">example.com</option>
            <option value="custom">Custom domain</option>
        </select>   
    </div>            
    <button type="submit">Start</button>
</form>

It works everywhere, even on Safari mobile, but apparently Safari macOS chooses to ignore. What could be the cause?

I'm using macOS version 11.2.3 (20D91) Safari Version 14.0.3 (16610.4.3.1.7)

and it's a React app btw

Answer 1

Found it, but not so sure why it worked: Remove appearance: none. Now -webkit-appearance: none is respected.