क्या डिफ़ॉल्ट ड्रॉप डाउन साइन

Question

चुनने के लिए फ़ॉन्ट विस्मयकारी आइकन का उपयोग करना संभव है, मैं HTML चयन बॉक्स डिफ़ॉल्ट शैली के बजाय फ़ॉन्ट भयानक "fa-chevron-down" आइकन का उपयोग करना चाहता हूं। कृपया संलग्न छवि देखें।

Answer 1

आप छद्म वर्गों के साथ ऐसा कर सकते हैं। मैंने चरणों का अनुसरण here और, रूपांतरण को हटाने मेरे फ़ॉन्ट के रूप में FontAwesome का उपयोग करके संशोधित, और UTF-8 आइकन के लिए सामग्री के रूप में as instructed here:

select { 
 
padding:4px; 
 
margin: 0; 
 
background: #fff; 
 
color:#888; 
 
border:none; 
 
outline:none; 
 
display: inline-block; 
 
-webkit-appearance:none; 
 
-moz-appearance:none; 
 
appearance:none; 
 
cursor:pointer; 
 
width: 150px; 
 
-webkit-border-radius: 0px; 
 
-moz-border-radius: 0px; 
 
border-radius: 0px; 
 
} 
 

 
/* Targetting Webkit browsers only. FF will show the dropdown arrow with so much padding. */ 
 
@media screen and (-webkit-min-device-pixel-ratio:0) { 
 
select {padding-right:18px} 
 
} 
 

 
label {position:relative} 
 
label:after { 
 
content:"\f078"; 
 
font-family: "FontAwesome"; 
 
font-size: 11px; 
 
color:#aaa; 
 
right:8px; top:4px; 
 
padding:0 0 2px; 
 
position:absolute; 
 
pointer-events:none; 
 
} 
 
label:before { 
 
content:''; 
 
right:4px; top:0px; 
 
width:23px; height:18px; 
 
background:#fff; 
 
position:absolute; 
 
pointer-events:none; 
 
display:block; 
 
}

Here's a codepen in action.