FontAwesome में <select> [डुप्लिकेट]

Sep 24 2020

मैं चुनिंदा ड्रॉपडाउन के लिए डिफ़ॉल्ट तीर को बदलने की कोशिश कर रहा हूं (नीचे की तस्वीर में दाहिने हाथ की तरफ)। मेरा वर्तमान कोड निम्नलिखित है:

<script src='https://kit.fontawesome.com/a076d05399.js'></script>

<select id="wgtmsr" style="width: 230px !important; min-width: 230px; max-width: 230px; font-size: 18px; height: 59px;" name="wgtmsr";><i class="fas fa-arrow-circle-down">

<option class="_self" selected="selected" value="#">MAKES SERVICED</option>
    
</select>

जिसके परिणामस्वरूप निम्नलिखित हैं: कोई आइकन दिखाई नहीं देता है

जवाब

1 IvanFrolov Sep 24 2020 at 14:24

<select id="wgtmsr" style="width: 230px !important; min-width: 230px; max-width: 230px; font-size: 18px; height: 59px;" name="wgtmsr";><i class="fas fa-arrow-circle-down">

<option class="_self" selected="selected" value="#">MAKES SERVICED</option>
    
</select>

<style>
#wgtmsr {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='arrow-circle-down' class='svg-inline--fa fa-arrow-circle-down fa-w-16' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='currentColor' d='M504 256c0 137-111 248-248 248S8 393 8 256 119 8 256 8s248 111 248 248zm-143.6-28.9L288 302.6V120c0-13.3-10.7-24-24-24h-16c-13.3 0-24 10.7-24 24v182.6l-72.4-75.5c-9.3-9.7-24.8-9.9-34.3-.4l-10.9 11c-9.4 9.4-9.4 24.6 0 33.9L239 404.3c9.4 9.4 24.6 9.4 33.9 0l132.7-132.7c9.4-9.4 9.4-24.6 0-33.9l-10.9-11c-9.5-9.5-25-9.3-34.3.4z'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 100% 50%;
  background-size: 1em;
}
</style>

तत्व <select>करता है केवल टैग की अनुमति देने के<option> अंदर, कृपया यहाँ देख मैं उपयोग कर सकते हैं का चयन तत्वों के लिए विकल्पों में HTML टैग?

जैसा कि मैं समझता हूं - आप आइकन को जोड़ना चाहते हैं <select>, आप सीएसएस पृष्ठभूमि का उपयोग करके ऐसा कर सकते हैं , आप आधार में svg का उपयोग कर सकते हैं या किसी अन्य तत्व की तरह की पृष्ठभूमि का उपयोग कर सकते हैं (जैसे कि jpg / png छवि का उपयोग करने के लिए)।
इसके अलावा डिफ़ॉल्ट चयन ब्राउज़र शैलियों का उपयोग कर रीसेट करने की जरूरत हैappearance: none;

अद्यतन
मैंने svg फ़ाइल के रूप में आइकन डाउनलोड किया जिसे आप उपयोग करना चाहते थे और इसे पृष्ठभूमि के रूप में उपयोग किया था।
एक बात: मैंने बाहरी छवियों का उपयोग नहीं करने के लिए इसे बेस 64 में बदल दिया, लेकिन इसकी आवश्यकता नहीं है - जैसा कि मैंने कहा कि आप पृष्ठभूमि चित्र फ़ाइल के रूप में उपयोग कर सकते हैं।