css - 占位符在 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 文件

用 !important 编写 css 代码 让它工作

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