Solution 1 :

I would just use color: hsl(0,0%,0%) if your black does not work or use a hex code #000000 for black but if you want to control how dark it is just hsl but if not use hex code they those.

Problem :

When the chosen control ( is disabled, the text is grey in color. How to change it to black?

My example:

                <select class="form-control chosen-select" id="purposeName" data-placeholder="  Purpose(s)..." 
                multiple required data-parsley-errors-container="#purposeError" name="myPurposes">
                    <option value="Email" selected="selected">Email</option>
                    <option value="Travel arrangements">Travel arrangements</option>
                    <option value="Online banking">Online banking</option>
                    <option value="Online shopping" selected="selected">Online shopping</option>

    $('#purposeName').prop('disabled', true);

I tried this css but doesn’t work:

  width: 100% !important;

.chosen-container-multi .chosen-choices {
    min-height: 35px !important;
    border: 1px solid #CCCCCC;      

.chosen-container-multi:disabled {
  color: black;

.chosen-container-multi .chosen-choices:disabled+label {
  color: black!important;


Leave a Reply

Your email address will not be published. Required fields are marked *