占位符在firefox中没有显示相同的颜色

Question

我有一张下面的表格。占位符在firefox中与chrome或EDGE没有相同的颜色，我试过这些css技巧：

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

仍然没有任何想法？我搜索了很多，没有找到正确的解决方案加上我是前期开发的新手，谢谢你提前

Answer 1

它来自您的bootstrap file

写css code with !important所以它的工作

喜欢：color: blue !important;

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

只需添加带有班级名称的占位符规则

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;