Блог

Главная - Вопросы по программированию - Текст-заполнитель, не видимый в FF и IE

Текст-заполнитель, не видимый в FF и IE

#html #css #google-chrome #internet-explorer #firefox

#HTML #css #google-chrome #internet-explorer #firefox

Вопрос:

У меня возникли трудности с отображением текста-заполнителя в IE 11 и FireFox. Он отлично работает в Chrome. Я включил HTML только для 2 полей.

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
Скриншот Firefox
Скриншот Chrome

Он работает с приведенным ниже 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;
}

Ответ №1:

Если вы хотите стилизовать placeholder текст, вам следует использовать все возможные префиксы браузера для этого, как:

Фрагмент кода

 .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;
}  
 <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">

Комментарии:

1. Не работает, но когда я уменьшаю заполнение, кажется, что это работает, также, если я задаю ему высоту, кажется, что это работает

2. в вашем коде должно быть что-то еще, поскольку этот фрагмент работает отлично, даже я использую это в своих нескольких проектах без каких-либо сбоев.

Ответ №2:

вы пробовали это с объявленным элементом? Например.

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

У меня нет IE 11, поэтому я не могу протестировать.