カスタムドロップダウン矢印

Question

選択タグのドロップダウン矢印を 4 つの要素で構成されるカスタム矢印に変更することはできますか。次のようにしたいのですが、左側に 3 本の水平線、右側に下向きの矢印があります

1 つの要素 (水平線) でこの効果を実現することができました

.select-wrapper::before {
        内容: "";
        位置: 絶対;
        トップ: 50%;
        表示ブロック;
        幅: 9px;
        高さ: 2px;
        背景: 黒;
    }

Answer 1

この CodePen と同様の効果を達成したいと思います。このコードはほぼ完全に、この質問に対するSVNMの回答から来ています。

この回答からの変更

画像を使用して説明する線/矢印を作成します。SVG の使用方法を知っていればより良いかもしれません
背景画像の位置とサイズ

サンプルHTML

リーリー

CSSS

リーリー