자리 표시자가 firefox에서 동일한 색상을 표시하지 않습니다.

Question

아래 양식이 있습니다.

::-webkit-input-placeholder { 
 
    /* Chrome/Opera/Safari */ 
 
    color: white; 
 
} 
 

 
::-moz-placeholder { 
 
    /* Firefox 19+ */ 
 
    color: white; 
 
} 
 

 
:-ms-input-placeholder { 
 
    /* IE 10+ */ 
 
    color: white; 
 
} 
 

 
:-moz-placeholder { 
 
    /* Firefox 18- */ 
 
    color: white; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<form id="myForm" action="#" method="post"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-6 "> 
 
     <input type="text" class="form-control inputCustom " placeholder="Full Name" name="fname" required="required" id="fname"> 
 
     <input type="text" class="form-control inputCustom " placeholder="Father's Name" name="lname" id="lname" required="required"> 
 
     <input type="text" class="form-control inputCustom " placeholder="Office Address" name="offAddress" id="offAddress" required="required"> 
 
     <input type="tel" class="form-control inputCustom " placeholder="Mobile Number" name="Mnum" id="Mnum" required="required"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</form>

여전히 어떤 생각을 작동하지 : 장소 홀더 크롬 또는 가장자리 파이어 폭스에서 동일한 색상을 가지고 있지, 난이 CSS 트릭을 시도? 내가 많이 검색하고 올바른 해결책을 발견하지 않았다 플러스 내가

Answer 1

그냥 클래스 이름과 장소 홀더 규칙을 추가 사전에 감사 프런트 엔드 개발에 새로운 오전

#myForm { 
 
    background: #333; 
 
} 
 
.form-control.inputCustom { 
 
    background: transparent; 
 
} 
 
.form-control.inputCustom::-webkit-input-placeholder { /* Chrome/Opera/Safari */ 
 
    color:white; 
 
} 
 
.form-control.inputCustom::-moz-placeholder { /* Firefox 19+ */ 
 
    color:white; 
 
} 
 
.form-control.inputCustom:-ms-input-placeholder { /* IE 10+ */ 
 
    color:white; 
 
} 
 
.form-control.inputCustom:-moz-placeholder { /* Firefox 18- */ 
 
    color:white; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<form id="myForm" action="#" method="post"> 
 
    <div class="container"> 
 
     <div class="row"> 
 
      <div class="col-md-6 "> 
 
       <input type="text" class="form-control inputCustom " placeholder="Full Name" name="fname" required="required" id="fname"> 
 
       <input type="text" class="form-control inputCustom " placeholder="Father's Name" name="lname" id="lname" required="required"> 
 
       <input type="text" class="form-control inputCustom " placeholder="Office Address" name="offAddress" id="offAddress" required="required"> 
 
       <input type="tel" class="form-control inputCustom " placeholder="Mobile Number" name="Mnum" id="Mnum" required="required"> 
 
      </div>

Answer 2

그는 bootstrap file

쓰기 css code with !important 그래서 그 일에서 오는

같은 : color: blue !important;

::-webkit-input-placeholder { 
 
    /* Chrome/Opera/Safari */ 
 
    color: blue !important; 
 
} 
 

 
::-moz-placeholder { 
 
    /* Firefox 19+ */ 
 
    color: blue !important; 
 
} 
 

 
:-ms-input-placeholder { 
 
    /* IE 10+ */ 
 
    color: blue !important; 
 
} 
 

 
:-moz-placeholder { 
 
    /* Firefox 18- */ 
 
    color: blue !important; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<form id="myForm" action="#" method="post"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-6 "> 
 
     <input type="text" class="form-control inputCustom " placeholder="Full Name" name="fname" required="required" id="fname"> 
 
     <input type="text" class="form-control inputCustom " placeholder="Father's Name" name="lname" id="lname" required="required"> 
 
     <input type="text" class="form-control inputCustom " placeholder="Office Address" name="offAddress" id="offAddress" required="required"> 
 
     <input type="tel" class="form-control inputCustom " placeholder="Mobile Number" name="Mnum" id="Mnum" required="required"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</form>