如何更改引导选择器默认占位符文本颜色

Question

我目前正在尝试从默认黑色更改已禁用选项的默认占位符。到＃008752。

下面的代码示例：

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

需要更改的代码行：

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

以下正确颜色的示例，来自两个日期输入，其中slectpicker为默认颜色。

以下代码也无效：

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

它更改了错误的文本行而不是占位符。

刚试过webkit示例，它只是替换了其他占位符而不是扇区

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

webkit测试的结果

Answer 1

这应该可以解决问题。

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

Answer 2

你的意思是改变“请选择......”这种颜色？如果这就是你想要的，那么你可以试试这些：

的Javascript

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

HTML（内联css）

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

有更多更有效的方法，但这些可以解决问题。

Answer 3

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

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

Answer 4

这是片段形式bootstrap.css：

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

因此，请尝试更改值并向其添加!important：

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

Answer 5

通过尝试修正了自己：

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