부트 스트랩 선택의 자리 표시 자 색을 변경하는 방법

Question

Bootstrap-select 드롭 다운 상자의 자리 표시 자/제목 색을 변경하고 싶습니다. 지금은 검은 색으로 보입니다. 어두운 회색이되고 싶습니다.

Before

나는 잘 작동 내 CSS를

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

After,이를 추가했습니다. 그러나 이것은 또한 옵션을 검은 색 대신 어두운 회색으로 만들었다. See here. 모든 옵션이 아닌 짙은 회색으로 만 자리 표시 자의 색을 변경하고 싶습니다. 어떻게 이것을 가장 잘 수행 할 수 있습니까? 감사.

HTML :

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

편집 :

순수 CSS 스타일은 어떤 이유로 나를 위해 작동하지 않는 것 같습니다. Bootstrap-select의 네이티브 타이틀 속성을 사용해 보았지만 문서에 표시된 것처럼 회색으로 표시되지 않습니다. "선택"또는 "옵션 1"에 따라 span.filter-option.pull-left의 색을 변경하는 Javascript/JQuery 방법이 있습니까?

추신. Chrome 검사기 도구가 Select 에 대해 표시하고 Option 1에 대해서는이 두 가지 외에 다른 옵션이 없습니다.

Answer 1

가장 중요한 문제는 플러그인 (bootstrap-select)에 실제로 설정 한 방법이 없다는 것입니다. 단일 선택을 사용하는 경우 (속성은), 값을 선택할 때 bs-placeholder 클래스를 추가 할 수 있습니다.이 값을 선택하면 (0120)를 사용하여 해당 값을 @input-color-placeholder 변수로 설정하면 색상 :

.bootstrap-select { 
    ... 

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

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

이 유일한 문제는 그것이 다수의 선택 인 경우 플러그인 클래스를 추가하지 않습니다, 그래서 당신은 값이 선택되어 있는지 확인하려면 창조적 조금 얻을해야한다는 것입니다. 불행히도 내가 볼 수있는 유일한 DOM 속성 조작은 기본적으로 제목이 .dropdown-toggle 인 변경입니다.

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

이제 인 경우 : 당신은 CSS로 초기 title 속성을 하드 코딩 괜찮다면 제목과 같이 특정 값 (https://jsfiddle.net/gxvqa5xa/) 인 경우, 당신은 색상을 변경하는 클래스를 추가 할 수 있습니다 너무 더럽거나 신뢰할 수없는 플러그인은 이벤트 리스너를 지원합니다, 그래서 당신은 (나는이 방법을 선호), 변경 수신이 비어 있는지 확인하고 있는지 클래스를 추가 할 수 있습니다

$('.selectpicker').on('changed.bs.select', function (e) { 
 
\t $(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>

Answer 2

부트 스트랩 선택 작업을 알지 못하지만 CSS에 속성 선택자가 있으므로 사용할 수 있습니다. BS-선택을 파고 후

elements[attribute] { 

} 

******* EDIT 1 ********

같은 뭔가, 나는이

<select class="selectpicker" title="Choose one of the following..."> 
    <option>Mustard</option> 

    <option>Ketchup</option> 
    <option>Relish</option> 
</select> 

같은 것을 발견 갈색 색상 자리 표시자를 배치합니다.

**** 편집 2 * *****

작동 코드 전체를 선택 태그

button.bs-placeholder[role='button']>span{ color:darkgrey; }

Answer 3

1. 설정 다른 색상.
2. 모든 검사되지 않은 요소에 대해 보통 색을 설정합니다.

   select { color: red; } 
    
   option:not(:checked) { color: black; } 
    
   option:checked { color: black; }

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

https://jsfiddle.net/ojdoug22/

편집 :

option:checked { color: black; } 

은 그냥 CSS에 다음 행을 추가합니다.

새로운 JSFiddle : https://jsfiddle.net/ojdoug22/1/

EDIT2 : 추가 스크린 샷. 나는 빨간 "제목"선택 옵션을보고 다른 모든 것들은 검은 색입니다. 다른 하나를 선택하면 변경됩니다.