OneMoreQuestion OneMoreQuestion - 3 months ago 105
CSS Question

How to change Bootstrap-select's placeholder color

I want to change the placeholder/title color of Bootstrap-select dropdown box. Right now it looks like this, which is black, I want it to be a dark grey.

Before

I tried adding this to my css

span.filter-option.pull-left {
color: darkgrey;
}


After, which works fine. But this also made the options a dark grey instead of black. See here. I only want to change the color of the placeholder to dark grey not all the options. How do I best accomplish this? Thanks.

HTML:

<select name="box" class="selectpicker form-control">
<option value="">Select</option>
<option value="option1"> Option 1 </option>
</select>


EDIT:

Pure CSS styling does not seem to work for me for some reason. I have tried using Bootstrap-select's native title property but it is not greyed out like it showed in the docs. Is there a Javascript/JQuery way for me to change the color of span.filter-option.pull-left depending whether it is "Select" or "Option 1"?

PS. this is what Chrome inspector tool shows me for Select
and for Option 1, there is no other option besides these two.

Answer

The primary issue at hand is that the plugin (bootstrap-select) doesn't really have a set way to do this. If you're just using the single select (non-multiple attribute on the select) you can rely on the bs-placeholder class to be added when a value is selected, which (if you're using LESS) uses the @input-color-placeholder variable to set the color:

.bootstrap-select {
  ...

  // The selectpicker button
  > .dropdown-toggle {
    ...

    &.bs-placeholder,
    &.bs-placeholder:hover,
    &.bs-placeholder:focus,
    &.bs-placeholder:active { color: @input-color-placeholder; }
  }
  ... 
}

The only problem with this is that the plugin doesn't add the class if it's a multiple select, so you have to get a little creative to determine if a value is selected. Unfortunately the only DOM attribute manipulation that I can see happening by default is the title changing .dropdown-toggle. If you don't mind hard coding the initial title attribute into the CSS, you can add a class that changes the color if the title is a certain value like so (https://jsfiddle.net/gxvqa5xa/):

.bootstrap-select > .dropdown-toggle[title=Select],
.bootstrap-select > .dropdown-toggle[title=Select]:hover,
.bootstrap-select > .dropdown-toggle[title=Select]:focus,
.bootstrap-select > .dropdown-toggle[title=Select]:active { color: darkgrey; }

Now, if that is too dirty or unreliable, the plugin does support event listeners, so you could just listen for change, check to see if it's blank and add a class if it is (I prefer this method):

$('.selectpicker').on('changed.bs.select', function (e) {
	$(this).prevAll('.dropdown-toggle').toggleClass('bs-placeholder', this.value === '');
}).trigger('changed.bs.select');
@import url(https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css);
@import url(https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.0/css/bootstrap-select.css);
*{outline:none !important;}

.bootstrap-select > .dropdown-toggle.bs-placeholder,
.bootstrap-select > .dropdown-toggle.bs-placeholder:hover,
.bootstrap-select > .dropdown-toggle.bs-placeholder:focus,
.bootstrap-select > .dropdown-toggle.bs-placeholder:active { color: red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.0/js/bootstrap-select.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>

<select name="box1" class="selectpicker form-control" title="Select">
  <option value="option1"> Option 1 </option>
  <option value="option2"> Option 2 </option>
  <option value="option3"> Option 3 </option>
</select>
<select name="box2" multiple class="selectpicker form-control" title="Select">
  <option value="option1"> Option 1 </option>
  <option value="option2"> Option 2 </option>
  <option value="option3"> Option 3 </option>
</select>

Comments