appearance: noneで標準の見た目を外し、矢印を自作したセレクトボックス。ブラウザ間の見た目の差をなくしつつ、キーボード操作は標準のままです。
プレビュー枠は右下をドラッグすると高さを変えられます
書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。
select要素は ::after などの疑似要素が使えないため、ラッパーdivを1枚かぶせてそちらに矢印を描きます。矢印には pointer-events: none を指定し、クリックが下のselectへ素通りするようにします。appearance: none で消えるのは「閉じた状態」の見た目だけで、開いたドロップダウンの中身はOS標準のまま（装飾不可）という割り切りも覚えておくと迷いません。
ドロップダウンの中身までデザインしたい場合は、カスタマイズ可能セレクト（appearance: base-select、実験的）かJSコンポーネントの領域になります。
カスタムデザインのセレクトボックスを作ってください。appearance: noneで標準の見た目を外し、ラッパー要素の::after + clip-pathで矢印を自作、pointer-events: noneでクリックを妨げないようにしてください。