CODEWITHSUNDEEP
cssbootstrap-4jquery-chosen
mstdmstd
mstdmstd

Reputation: 3115

How to set color of placeholder of Chosen selection input?

In my jQuery v3 / Bootstrap v4.1.2 application, I use chosen.jquery (Version 1.8.7) and I did not find how to set color of placeholder text of of Chosen selection input with styles like:

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
  color:    #c2c200 !important;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  color:    #c2c200 !important;
  opacity:  1 !important;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
  color:    #c2c200 !important;
  opacity:  1 !important;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color:    ##c2c200 !important;
}
::-ms-input-placeholder { /* Microsoft Edge */
  color:    #c2c200 !important;
}

::placeholder { /* Most modern browsers support this now. */
  color:    ##c2c200 !important;
}

And I init it with code: 

$(".chosen_select_box").chosen({
    disable_search_threshold: 10,
    allow_single_deselect: true,
    no_results_text: "Nothing found!",
});

You can look at it this fiddle: http://jsfiddle.net/1Lpdk79r/3/

But it does not work for chosen input. How to fix it?

Upvotes: 3

Views: 1114

Answers (1)

Don't Panic
Don't Panic

Reputation: 14520

If you view the source of your fiddle, you can see that the Chosen plugin generates a text input from your select, and adds the placeholder text as the input value. It also styles that input. So you just need to override the Chosen styling with your own.

This will do, to change text colour:

.chosen-container-multi .chosen-choices li.search-field input[type="text"] {
    color: #c2c200;
}

Here's an updated version of your fiddle showing the result.

Upvotes: 4

Related Questions