Bootstrap 3으로 자리 표시 자 색상을 변경하지 못함

Bootstrap 3으로 자리 표시 자 색상을 변경하지 못함

---

두 가지 질문 :

1. 자리 표시 자 텍스트를 흰색으로 만들려고합니다. 하지만 작동하지 않습니다. Bootstrap 3을 사용하고 있습니다.JSFiddle demo

2. 또 다른 질문은 전역이 아닌 자리 표시 자 색상을 변경하는 방법입니다. 즉, 여러 필드가 있고 하나의 필드에만 흰색 자리 표시자가 있고 다른 모든 필드는 기본 색상으로 유지됩니다.

미리 감사드립니다.

html :

<form id="search-form" class="navbar-form navbar-left" role="search">
    <div class="">
        <div class="right-inner-addon"> <i class="icon-search search-submit"></i>
            <input type="search" class="form-control" placeholder="search" />
        </div>
    </div>
</form>

css :

.right-inner-addon {
    position: relative;
}
.right-inner-addon input {
    padding-right: 30px;
    background-color:#303030;
    font-size: 13px;
    color:white;

}
.right-inner-addon i {
    position: absolute;
    right: 0px;
    padding: 10px 12px;
    /*  pointer-events: none; */
    cursor: pointer;
    color:white;
}


/* do not group these rules*/
::-webkit-input-placeholder { color: white; }
FF 4-18 
:-moz-placeholder           { color: white; }
 FF 19+
::-moz-placeholder          { color: white; }
 IE 10+
:-ms-input-placeholder      { color: white; } 

---

다음과 같이 클래스 선택기에 자리 표시자를 할당합니다.

.form-control::-webkit-input-placeholder { color: white; }  /* WebKit, Blink, Edge */
.form-control:-moz-placeholder { color: white; }  /* Mozilla Firefox 4 to 18 */
.form-control::-moz-placeholder { color: white; }  /* Mozilla Firefox 19+ */
.form-control:-ms-input-placeholder { color: white; }  /* Internet Explorer 10-11 */
.form-control::-ms-input-placeholder { color: white; }  /* Microsoft Edge */

더 강력한 선택기가 아마도 글로벌을 재정의했기 때문에 작동합니다. 나는 태블릿을 사용하고 있으므로 어떤 강력한 선택기를 검사하고 확인할 수 없습니다. :)하지만 작동합니다.

이것은 또한 두 번째 질문에 대한 답변입니다. 클래스 또는 ID에 할당하고 해당 클래스에만 입력을 제공함으로써 스타일에 대한 입력을 제어 할 수 있습니다.

---

이에 대해 여기에 게시 된 문제가 있습니다 : https://github.com/twbs/bootstrap/issues/14107

이 커밋으로 문제가 해결되었습니다 : https://github.com/twbs/bootstrap/commit/bd292ca3b89da982abf34473318c77ace3417fb5

이 솔루션은 따라서 다시로 재정의하는 것입니다 #999하지 white(또한 단지 웹킷 - 스타일에 대한 모든 부트 스트랩 스타일을 재정의) 제안 :

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

---

가능한 잡았다

권장 온 전성 검사 - form-control입력에 클래스를 추가해야합니다 .

페이지에 부트 스트랩 CSS가로드되어 있지만 입력에
class="form-control"자리 표시 자 CSS 선택기가 적용되지 않는 경우.

문서의 마크 업 예 :

I know this didn't apply to the OP's markup but as I missed this at first and spent a little bit of effort trying to debug it, I'm posting this answer to help others.

---

I'm using Bootstrap 4 and Dennis Puzak's solution does not work for me.

The next solution works for me

.form-control::placeholder { color: white;} /* Chrome, Firefox, Opera*/
:-ms-input-placeholder.form-control { color: white; }  /* Internet Explorer*/
.form-control::-ms-input-placeholder { color: white; }  /* Microsoft Edge*/

---

Bootstrap has 3 lines of CSS, within your bootstrap.css generated file that control the placeholder text color:

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

Now if you add this to your own CSS file it won't override bootstrap's because it is less specific. So assmuning your form inside a then add that to your CSS:

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

Voila that will override bootstrap's CSS.

---

I think qwertzman is on the right track for the best solution to this.

If you only wanted to style a specific placeholder, then his answer still holds true.

But if you want to override the colour of all placeholders, (which is more probable) and if you are already compiling your own custom Bootstrap LESS, the answer is even simpler!

Override this LESS variable: @input-color-placeholder

---

Boostrap Placeholder Mixin:

@mixin placeholder($color: $input-color-placeholder) {
  // Firefox
  &::-moz-placeholder {
    color: $color;
    opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526
  }
  &:-ms-input-placeholder { color: $color; } // Internet Explorer 10+
  &::-webkit-input-placeholder  { color: $color; } // Safari and Chrome
}

now call it:

@include placeholder($white);

---

You should check out this answer : Change an HTML5 input's placeholder color with CSS

Work on most browser, the solution in this thread is not working on FF 30+ for example

---

With LESS the actual mixin is in vendor-prefixes.less

.placeholder(@color: @input-color-placeholder) {
...
}

This mixin is called in forms.less on line 133:

.placeholder();

Your solution in LESS is:

.placeholder(#fff);

Imho the best way to go. Just use Winless or a composer compiler like Gulp/Grunt works, too and even better/faster.

---

The others did not work in my case (Bootstrap 4). Here is the solution I used.

html .form-control::-webkit-input-placeholder { color:white; }
html .form-control:-moz-placeholder { color:white; }
html .form-control::-moz-placeholder { color:white; }
html .form-control:-ms-input-placeholder { color:white; }

This overrides bootstraps css as we use a high level of specificity to target .form-control elements.

참고URL : https://stackoverflow.com/questions/20773665/fail-to-change-placeholder-color-with-bootstrap-3