私は選択したフォームでドロップダウンリストを作成する必要があります。私はFontAwesomeのアイコンを使用したい：リストが選択されていないときは「ファー・アングル・ダウン」、リストが展開されているときは最初のリスト・アイテムの隣に「ファー・アングル・アップ」があります。どうやってやるの？ JavaScriptまたはjQueryを使用する必要がありますか？選択フォームでimgの代わりにiconを使用するにはどうすればいいですか？
<body>
<fieldset>
<legend>numbers</legend>
<select name="numbers">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</fieldset>
</body>
ドロップダウンリストのカスタムスタイルを使用して、選択したケースでカスタムCSSを使用するようにブラウザを強制することを検討していると思います。
最初に選択要素をスパンでラップし、擬似クラスの前後に追加する選択フィールドを追加する必要があります。
前の擬似クラスでは、選択領域のトグルボタンの背景色を追加し、擬似クラスの後に、fontawesomeグリフを使用してアングルアイコンを追加します。
.selectwrap {
position:relative;
}
.selectwrap::before {
content:'';
right:1px;
top:-8px;
width:30px;
height:38px;
background:#ffffff;
position:absolute;
pointer-events:none;
display:block;
border-radius: 3px;
}
.selectwrap::after {
content:"\f106";
font-family: "FontAwesome";
font-size: 12px;
right: 12px;
top:3px;
color: #c4d3dc;
padding:0 0 2px;
position:absolute;
pointer-events:none;
}
.selectwrap:focus::after {
content: "\f107";
}
.selectwrap select {
padding:7px 15px;
height: 40px;
margin: 0;
background: #eff3f5;
border:1px solid #e4ebef;
outline:none;
display: inline-block;
-webkit-appearance:none;
-moz-appearance:none;
cursor:pointer;
width: 300px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<span class="selectwrap">
<select>
<option selected="'selected'" value="0">Sunday</option><option value="1">Monday</option>
<option value="2">Tuesday</option>
<option value="3">Wednesday</option>
<option value="4">Thursday</option>
<option value="5">Friday</option>
<option value="6">Saturday</option>
</select>
</span>私の答えはあなたを役に立てば幸いです。
これまでにどのようなコードをお持ちですか？コードスニペットを投稿する – StefanBob
現在の形式では、あなたの質問は不明です。あなたは何を*選択フォーム*と呼んでいますか？ '
はい、htmlを意味します