Farbe des Daten-Symbols der Selectpicker-Option im Bootstrap ändern

-1

Ich benutze Bootstrap Selectpicker und ich möchte die Farbe der Daten-Symbol der Optionen in auswählen. Jedes Daten-Icon hat eine bestimmte Farbe und ich muss internes CSS dafür benutzen. Jeder kann mir helfen. Wie kann ich das machen?Farbe des Daten-Symbols der Selectpicker-Option im Bootstrap ändern

<select class="bs-select selectpicker form-control" data-show-subtext="true" multiple> 
    <option data-icon="fa fa-circle">Mustard</option> 
    <option data-icon="fa fa-circle">Ketchup</option> 
    <option data-icon="fa fa-circle">Relish</option> 
    <option data-icon="fa fa-circle">Mayonnaise</option> 
    <option data-icon="fa fa-circle">Barbecue Sauce</option> 
</select>

Quelle

2017-03-24 Farzaneh

Können Sie bitte hinzufügen Geige ändert oder ein anderes Codebeispiel, um diese Datensymbole zu sehen, wie werden sie in Optionen visualisiert? –

Ich füge ein Bild davon, die Kreise sind Daten-Icon – Farzaneh

Wir brauchen den Code, weil neben , Bootstrap gibt zusätzliche Tags. –

Wenn ich Ihre Frage richtig verstanden habe, nur ein paar Farbklassen hinzufügen und sie dann Stil:

<select class="bs-select selectpicker form-control" data-show-subtext="true" multiple> 
    <option data-icon="fa fa-circle" class="red">Mustard</option> 
    <option data-icon="fa fa-circle" class="blue">Ketchup</option> 
    <option data-icon="fa fa-circle" class="green">Relish</option> 
    <option data-icon="fa fa-circle" class="yellow">Mayonnaise</option> 
    <option data-icon="fa fa-circle" class="white">Barbecue Sauce</option> 
</select>

CSS

.red {color: red}; 
.blue {color: blue}; 
.green {color: green}; 
.yellow {color: yellow}; 
.white {color: white};

Quelle

2017-03-24 14:37:48 sn3ll

wie ich in meiner Frage erwähnt, ich möchte nur die Farbe der Daten-Symbol (nicht Wert der Option) ändern. und weil colores dynamisch sind und aus der datenbank kommen, muss ich inline css hinzufügen – Farzaneh

Von Custom content

I <option data-content="<i class='fa fa-circle red'></i> Mustard">Mustard</option> als Option

siehe data-content="<i class='fa fa-circle red'></i> Mustard" Added Klasse red, um es auszuwählen, die Farbe des Daten-Symbols nicht den Text der Option

$(window).on('load', function() { 
 
    $('select').selectpicker(); 
 

 
}); //]]>

.green { 
 
    color: green !important 
 
} 
 

 
.yellow { 
 
    color: yellow !important 
 
} 
 

 
.white { 
 
    color: white !important 
 
} 
 

 
.blue { 
 
    color: blue !important 
 
} 
 

 
.red { 
 
    color: red !important 
 
} 
 

 
.bootstrap-select.btn-group:not(.input-group-btn), 
 
.bootstrap-select.btn-group[class*="span"] { 
 
    margin: 0 !important; 
 
}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.5.4/bootstrap-select.min.css"> 
 
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
 
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.5.4/bootstrap-select.min.js"></script> 
 

 
<select class="bs-select selectpicker form-control" data-show-subtext="true" multiple> 
 
    <option data-content="<i class='fa fa-circle red'></i> Mustard">Mustard</option> 
 
    <option data-content="<i class='fa fa-circle blue'></i> Ketchup">Ketchup</option> 
 
    <option data-content="<i class='fa fa-circle green'></i> Relish">Relish</option> 
 
    <option data-content="<i class='fa fa-circle yellow'></i> Mayonnaise">Mayonnaise</option> 
 
    <option data-content="<i class='fa fa-circle white'></i> Barbecue Sauce">Barbecue Sauce</option> 
 
</select>

Quelle

2017-04-13 15:34:46

Farbe des Daten-Symbols der Selectpicker-Option im Bootstrap ändern

Antwort

Verwandte Themen