How to change a bootstrap selector default placeholder text colour

Question

I'm currently trying to change the default placeholder of a disabled option from the default black. to #008752.

Code example below:

        <div class="col-sm-3">
          <select class="form-control" size="auto" id="selectpicker1" required>
          <option value="" disabled selected>Please select...</option>
          <option value="opt01">opt1</option>
          <option value="opt02">opt2</option>
          </select>
        </div>

The line of code that needs to be changed:

<option value="" disabled selected>Please select...</option>

Example of the correct colour below, from the two date inputs, with the slectpicker in its default colour.

The following code below is also not working:

 <option value="" style="color:#008752 !important" disabled selected>Please select...</option>

It changes the wrong text line and not the placeholder.

Just tried the webkit example and it just replaced the other placeholders and not the sector

.form-control::-moz-placeholder {
  color: #008752 !important;
  opacity: 1;
}
.form-control:-ms-input-placeholder {
  color: #008752 !important;
}
.form-control::-webkit-input-placeholder {
  color: #008752 !important;
}

Outcome of webkit test

I too had same issue...this is what I did http://codepen.io/tusharbandal/pen/BqhlD — Tushar, May 25 '16 at 12:56

score 2 · Answer 1 · answered May 25 '16 at 12:30

2

This should do the trick.

 ::-webkit-input-placeholder { 
        color:  #008752;
    }
    :-moz-placeholder {
       color:  #008752;
       opacity:  1;
    }
    ::-moz-placeholder {
       color:   #008752;
       opacity:  1;
    }
    :-ms-input-placeholder {
       color:   #008752;
    }

answered May 25 '16 at 12:30

JustinasT

561
1
8
27

Try to check: http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css - There are huge post about this. I believe it should be helpful. – JustinasT May 25 '16 at 12:34

score 1 · Answer 2 · answered May 25 '16 at 12:35

Do you mean changing "Please select..." to this color? If that's what you want then you could try it with these:

Javascript

document.getElementById('selectpicker1').options[0].style.color = '#008752';

HTML (inline css)

 <option value="" style="color:#008752" disabled selected>Please select...</option>

There are more and efficient ways, but these take the cake.

score 1 · Answer 3 · answered May 25 '16 at 12:38

1

<style>
    .form-control #disabledtext {
          color : #008752 !important;
    }
</style>

use id="disabledtext"

<div class="col-sm-3">
      <select class="form-control" size="auto" id="selectpicker1" required>
      <option id="disabledtext" value="" disabled selected>Please select...</option>
      <option value="opt01">opt1</option>
      <option value="opt02">opt2</option>
      </select>
    </div>

answered May 25 '16 at 12:38

Ameer Abbas

11
4

1

you can also use inline css like `` – Ameer Abbas May 26 '16 at 07:59

score 1 · Answer 4 · answered May 25 '16 at 12:39

This is fragment form bootstrap.css:

.form-control::-moz-placeholder {
  color: #999;
  opacity: 1;
}
.form-control:-ms-input-placeholder {
  color: #999;
}
.form-control::-webkit-input-placeholder {
  color: #999;
}

So try to change values and add !important to them:

.form-control::-moz-placeholder {
  color: #008752 !important;
  opacity: 1;
}
.form-control:-ms-input-placeholder {
  color: #008752 !important;
}
.form-control::-webkit-input-placeholder {
  color: #008752 !important;
}

score 0 · Accepted Answer · answered May 25 '16 at 12:59

0

Fixed it myself by trying:

<select class="form-control" size="auto" style="color: #008752" id="selectpicker1" required>

answered May 25 '16 at 12:59

Mattlinux1

777
2
13
25

How to change a bootstrap selector default placeholder text colour

5 Answers5