css-selectプロパティ

今週のクローンコード:Netflix

1.現在の進捗状況

今週から新しいクローンコードでNetflix画面を行います.
まず、表示には明らかな区別性があるので、ヘッダー-section-フッターで表示を区別すれば完成です.
今日はinputやbuttonなどをモジュール化して整理しましたが、
ここで大きな問題に遭遇しました...

2.ラベルの選択

Netflixのサイトに入ると、韓国語と英語を選ぶボタンがあります.

このボタンはよく使うかもしれないので、モデリング時に障害に遭遇しました.

 <select id="sel-lan">
        <option value="한국어" selected>한국어</option>
        <option value="English">English</option>
        </select>

そう書いてありますが、地球の形と矢印の形を仮想要素として入れたいと思います.
絶対に何をしても絵が見えない😭
一緒に勉強した友達に助けてもらいました.
まずmdnで...
selectの内部構造が複雑で制御が困難であり、ブラウザ間の差異が一致した収益をもたらす可能性があるため、要素のすべての部分を制御する際には、適切なスタイルのライブラリを提供することを考慮してください.
書いてある...

3.質問

まず、置換要素(置換要素)は仮想要素を使用できません.
ここで、置換要素(置換要素)とは、自身の表現結果がcssの範囲を超えた要素を指す.
私が理解しているのは、独特のスタイルを持つラベルです.
コンテンツ(スタイル)は現在のドキュメントスタイルの影響を受けません.
iframe
video
embed
img
これらのラベルは代表的です.
また,特定の場合のみ代替要素として扱われる.
option
audio
canvas
object
このようなテグ人のスタイルを変える方法は2つをお勧めします.

4.解決方法

人を含むラベルを作成します.

の他の要素とJavaScriptを使用して、まったく異なるドロップダウンメニューを作成します.

の外観ですべて消去します.

ライブラリを使用します.

こんな方法があるそうです.
💡 これは簡単な修正なので、前後に仮想要素を追加するだけでいいです.
問題はdivで解決しましたが、他の変更が必要な場合は非常に厄介になります.

<div class="btn-lan">
        <label for="sel-lan" class="hidden-txt">언어선택</label>
        <select id="sel-lan">
        <option value="한국어" selected>한국어</option>
        <option value="English">English</option>
        </select>
    </div>
    

.btn-lan::before {
    content: '';
    background: url(./img/globe-solid.svg);
    width: 13px;
    height: 14px;
    position: absolute;
    top: 3px;
    left: 10px;
}

.btn-lan::after {
    content: '';
    background: url(./img/caret-down-solid.svg) no-repeat;
    width: 22px;
    height: 40px;
    position: absolute;
    top: -9px;
    right: 2px;
}

この機会に非常に見慣れないselectを利用して勉強しました.
やはりどのラベルもよく聞く過程が必要です
ただの格子でしょう?考えていた私を反省する.
ファイルリンク