javascript - change color of data-icon of selectpicker option in bootstrap - Stack Overflow

admin管理员组

文章数量:1023109

I'm using bootstrap Selectpicker and i want to change the color of data-icon of options in select. each data-icon has specific color and I have to use internal CSS for it anybody can help me please how can i do that?

<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>

I'm using bootstrap Selectpicker and i want to change the color of data-icon of options in select. each data-icon has specific color and I have to use internal CSS for it anybody can help me please how can i do that?

<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>

• javascript
• jquery
• css
• html
• twitter-bootstrap

Share Improve this question Follow edited May 13, 2017 at 16:21 Deep 3015 10.1k55 gold badges3232 silver badges5454 bronze badges asked Mar 24, 2017 at 12:12 FarzanehFarzaneh 11111 silver badge1111 bronze badges 8

• 1 Can you please add fiddle or any other code example to see these data-icons how are visualized into options? – Nadezhda Serafimova Commented Mar 24, 2017 at 12:29
• i add a picture of that, the circles are data-icon – Farzaneh Commented Mar 24, 2017 at 12:41
• 1 We need the code, because beside <option data-icon="fa fa-circle">Mustard</option>, bootstrap outputs additional tags. – Nadezhda Serafimova Commented Mar 24, 2017 at 12:44
• 1 I found that the icon is outputed as <span class="glyphicon glyphicon-name"></span>, so you can just change the color of the icon, like .glyphicon-name{color: red;} – Nadezhda Serafimova Commented Mar 24, 2017 at 12:46
• in html file i just use option and data-icon and the values of options are e from database and the color of each data-icon is specific , because of that i have to use inline css in option tag how can i do that? – Farzaneh Commented Mar 24, 2017 at 13:00

 |  Show 3 more ments

2 Answers 2

Sorted by: Reset to default 4

From Custom content

I use <option data-content="<i class='fa fa-circle red'></i> Mustard">Mustard</option> as option to select

see data-content="<i class='fa fa-circle red'></i> Mustard" Added class red to it which changes color of data-icon not the text of 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./ajax/libs/bootstrap-select/1.5.4/bootstrap-select.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn./font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn./bootstrap/3.2.0/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn./bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare./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>

If I understand your question correctly, just add some color classes and then style them:

<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};

I'm using bootstrap Selectpicker and i want to change the color of data-icon of options in select. each data-icon has specific color and I have to use internal CSS for it anybody can help me please how can i do that?

<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>

I'm using bootstrap Selectpicker and i want to change the color of data-icon of options in select. each data-icon has specific color and I have to use internal CSS for it anybody can help me please how can i do that?

<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>

• javascript
• jquery
• css
• html
• twitter-bootstrap

Share Improve this question Follow edited May 13, 2017 at 16:21 Deep 3015 10.1k55 gold badges3232 silver badges5454 bronze badges asked Mar 24, 2017 at 12:12 FarzanehFarzaneh 11111 silver badge1111 bronze badges 8

• 1 Can you please add fiddle or any other code example to see these data-icons how are visualized into options? – Nadezhda Serafimova Commented Mar 24, 2017 at 12:29
• i add a picture of that, the circles are data-icon – Farzaneh Commented Mar 24, 2017 at 12:41
• 1 We need the code, because beside <option data-icon="fa fa-circle">Mustard</option>, bootstrap outputs additional tags. – Nadezhda Serafimova Commented Mar 24, 2017 at 12:44
• 1 I found that the icon is outputed as <span class="glyphicon glyphicon-name"></span>, so you can just change the color of the icon, like .glyphicon-name{color: red;} – Nadezhda Serafimova Commented Mar 24, 2017 at 12:46
• in html file i just use option and data-icon and the values of options are e from database and the color of each data-icon is specific , because of that i have to use inline css in option tag how can i do that? – Farzaneh Commented Mar 24, 2017 at 13:00

 |  Show 3 more ments

2 Answers 2

Sorted by: Reset to default 4

From Custom content

I use <option data-content="<i class='fa fa-circle red'></i> Mustard">Mustard</option> as option to select

see data-content="<i class='fa fa-circle red'></i> Mustard" Added class red to it which changes color of data-icon not the text of 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./ajax/libs/bootstrap-select/1.5.4/bootstrap-select.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn./font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn./bootstrap/3.2.0/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn./bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare./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>

If I understand your question correctly, just add some color classes and then style them:

<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};

本文标签： javascriptchange color of dataicon of selectpicker option in bootstrapStack Overflow