मैं चुनिंदा आइकन/ड्रॉपडाउन आइकन को बदलना चाहता हूं (एफए-शेवरॉन-डाउन)। मैं कैसे कर सकता हूँ?

Question

मैं कोड में जैसे फॉर्म का उपयोग करना चाहता हूं बूटस्ट्रैप से है, लेकिन मैं चुनिंदा आइकन/ड्रॉपडाउन आइकन को fa-chevron-down पर बदलना चाहता हूं।

.row > .col-sm-6 > form-group > .form-control-input-lg 
{ 
    background: url(images/example.gif) no-repeat scroll 0px 0px; 
    padding-left:0px; 
} 

यह:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-sm-6"> 
 
     <h2>Heading</h2> 
 
     <div class="form-group"> 
 
     <label for="exampleInputEmail1">Some-text</label> 
 
     <select class="form-control input-lg">...</select> 
 
     <label for="exampleInputEmail1">Some-text</label> 
 
     <select class="form-control input-lg">...</select> 
 
     <label for="exampleInputEmail1">Some-text</label> 
 
     <select class="form-control input-lg">...</select> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

यहां एक समाधान है जो फ़ॉन्ट-भयानक fa-chevron-down मूल रूप से (छवि का उपयोग किए बिना) का उपयोग करता है। यह आवश्यक है कि आप अपने मार्कअप पर एक फ़ॉन्ट-कमाल टैग जोड़ें, लेकिन यह काफी साफ है।

/* remove the original arrow */ 
 
select.input-lg { 
 
    -webkit-appearance: none; 
 
    -moz-appearance: none; 
 
    -o-appearance: none; 
 
    /* no standardized syntax available, no ie-friendly solution available */ 
 
} 
 

 
select + i.fa { 
 
    float: right; 
 
    margin-top: -30px; 
 
    margin-right: 5px; 
 
    /* this is so when you click on the chevron, your click actually goes on the dropdown menu */ 
 
    pointer-events: none; 
 
    /* everything after this is just to cover up the original arrow */ 
 
    /* (for browsers that don't support the syntax used above) */ 
 
    background-color: #fff; 
 
    padding-right: 5px; 
 
}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-sm-6"> 
 
     <h2>Heading</h2> 
 
     <div class="form-group"> 
 
     <label for="exampleInputEmail1">Some-text</label> 
 
     <select class="form-control input-lg">...</select> 
 
     <i class="fa fa-chevron-down"></i> 
 
     <label for="exampleInputEmail1">Some-text</label> 
 
     <select class="form-control input-lg">...</select> 
 
     <i class="fa fa-chevron-down"></i> 
 
     <label for="exampleInputEmail1">Some-text</label> 
 
     <select class="form-control input-lg">...</select> 
 
     <i class="fa fa-chevron-down"></i> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

आप एक सीएसएस फ़ाइल जोड़ने के लिए (है कि आप पृष्ठ के शीर्ष भाग में लिंक) और इस वर्ग के लिए एक पृष्ठभूमि छवि को निर्दिष्ट करने की सीएसएस wil अपनी छवि के साथ एक पृष्ठभूमि जोड़ें और जब आप अपने नियंत्रण में ग्लाइफिकॉन चाहते हैं तो केवल पैडिंग और पृष्ठभूमि की स्थिति को संशोधित करना होगा।

Answer 3

यह एक समाधान ऊपर (वुडरो बारलो) समाधान में आधारित, प्रकाश सुधार

/* remove the original arrow */ 
 
    select{ 
 
     -webkit-appearance: none; 
 
     -moz-appearance: none; 
 
     -o-appearance: none; 
 
     appearance: none; 
 
     background-color: #92ceea!important; 
 
    } 
 

 
    select::-ms-expand { 
 
     display: none; 
 
    } 
 

 
    select + i.fa { 
 
     float: right; 
 
     margin-top: -26px; 
 
     margin-right: 10px; 
 
     /* this is so when you click on the chevron, your click actually goes on the dropdown menu */ 
 
     pointer-events: none; 
 
     /* everything after this is just to cover up the original arrow */ 
 
     /* (for browsers that don't support the syntax used above) */ 
 
     background-color: transparent; 
 
     color:black!important; 
 
     padding-right: 5px; 
 
    } 
 

 
    select option{ 
 
     padding-right: 21px; 
 
    }

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> 
 

 

 

 

 
<select class="form-control"> 
 
     <option value="">select_option</option> 
 

 
     <option value="1">Opção1</option> 
 
     <option value="2">Opção2</option> 
 
</select> 
 
<i class="fa fa-chevron-down"></i>

ब्राउज़र compability सफा के साथ है ri 5.1.7 | आईई 9 | फ़ायरफ़ॉक्स | गूगल क्रोम

नोट IE9 पिता तीर में सामने है