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

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

CodePudding user response：

According to MDN doc, Safari v3 - 15.3 uses -webkit-apperance, while Safari v15.4 uses appearance CSS property.

Either way, the select element should have no "appearance", i.e. no dropdown box (but not hidden). A black border appears in Safari v15.5 (that's the version I got now). If you want the black border to be gone, add border: none.

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

Here is the JSFiddle.

CodePudding user response：

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