占位符文本在FF和IE中不可见

Question

我很难在IE 11和FireFox中显示占位符文本。它在chrome中工作正常。我只包含2个字段的HTML。

HTML

<input type="email" class="form-control CustomerNumber_Box" id="inputEmail" placeholder="DOMAIN \ NETWORK ID">

<input type="password" class="form-control CustomerNumber_Box" id="inputEmail" placeholder="PASSWORD">

CSS

.CustomerNumber_Box {
  border-bottom: 1px solid #97999B;
  border-top: none;
  border-right: none;
  border-left: none;
  border-radius: 0;
  box-shadow: none;
  padding: 27px 0;
  color: #97999b;
  font-size: 14px;
  width: 441px;
  position: relative;
  left: 14px;
  top: -5px;
  text-transform: uppercase;
}

的FireFox

当我调整高度和填充

时，它适用于下面的CSS

更新了CSS：

.CustomerNumber_Box {
    border-bottom: 1px solid $tooltip_border;
    border-top: none;
    border-right: none;
    border-left: none;
    border-radius: 0;
    box-shadow: none;
    padding: 9px 0;
    color: $black;
    font-size: 14px;
    width: 441px;
    position: relative;
    left: 14px;
    top: -5px;
    text-transform: uppercase;
    height: 57px;
}

Answer 1

您是否尝试过声明的元素？ E.g。

<font color='"#FF0000"'>input</font>:-ms-input-placeholder {  
   color: #A1A1A1;
}

我没有IE 11，所以无法测试。

Answer 2

如果您想要对 placeholder 文字进行样式化，那么您应该遵循所有可能的浏览器前缀：

代码段

＆＃13;

＆＃13;

.CustomerNumber_Box {
  border-bottom: 1px solid #97999B;
  border-top: none;
  border-right: none;
  border-left: none;
  border-radius: 0;
  box-shadow: none;
  padding: 27px 0;
  color: #000000;
  font-size: 14px;
  width: 441px;
  position: relative;
  left: 14px;
  top: -5px;
  text-transform: uppercase;
}
.CustomerNumber_Box::-webkit-input-placeholder {
  color: #909090;
}
.CustomerNumber_Box:-moz-placeholder {
  /* Firefox 18- */
  color: #909090;
}
.CustomerNumber_Box::-webkit-placeholder {
  color: #909090;
}
.CustomerNumber_Box::-moz-placeholder {
  /* Firefox 19+ */
  color: #909090;
}
.CustomerNumber_Box:-ms-input-placeholder {
  color: #909090;
}

＆＃13;

<input type="email" class="form-control CustomerNumber_Box" id="inputEmail" placeholder="DOMAIN \ NETWORK ID">

<input type="password" class="form-control CustomerNumber_Box" id="inputEmail" placeholder="PASSWORD">

＆＃13;

＆＃13;

＆＃13;