Заполнители ввода текста не отображаются в IE и Firefox

Мои помещики ввода текста отказываются отображать в IE и Firefox, несмотря на использование атрибута -moz-placeholder. Это можно просмотреть на странице контакта здесь, если вы используете Firefox или IE.

Может кто-то помочь, я пытался понять это в течение нескольких недель. Ниже приведен пример моего кода:

 input::-moz-placeholder, textarea::-moz-placeholder {
    color: #aaa;
    font-size: 18px;
}

    input:-ms-input-placeholder, textarea::-ms-input-placeholder {
        color: #aaa;
        font-size: 18px;
    }

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: #aaa;
    font-size: 18px;
}

ОТВЕТЫ

Ответ 1

Как указано в luke2012, это происходит, когда box-sizing: border-box; используется в полях ввода текста. Однако это происходит только при использовании фиксированной высоты (например, в структуре Bootstrap), и слишком много верхнего и нижнего отступов. Это не только предотвращает отображение текста заполнителя, но также и текст ввода в Firefox.

Я считаю, что лучшим решением является сохранить box-sizing: border-box; и вместо этого удалить верхнее и нижнее заполнение и увеличить высоту до общей высоты, которую вы хотите иметь в поле ввода (включая любую границу).

input[type="email"], input[type="password"], input[type="text"] 
{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height: 42px; // Increase height as required
    margin-bottom: 30px;
    padding: 0 20px; // Now only left & right padding
}

Это делает вещи более последовательными и хорошо работает в таких средах, как Bootstrap.

В качестве альтернативы вы можете увеличить фиксированную высоту или установить height: auto; и отрегулировать верхнее и нижнее заполнение по мере необходимости.

Ответ 2

::-webkit-input-placeholder { /* Chrome, Safari */
   color: #aaa;
   font-size: 18px;
}

:-moz-placeholder {           /* Firefox 18- */
   color: #aaa;
   font-size: 18px;
}

::-moz-placeholder {          /* Firefox 19+ */
  color: #aaa;
  font-size: 18px;
}

:-ms-input-placeholder {      /* Internet Explorer */
  color: #aaa;
  font-size: 18px;
}

Ответ 3

Кажется, что -moz-box-sizing вызывает вашу проблему.

input[type="email"], input[type="password"], input[type="text"] 
{
    -moz-box-sizing: border-box; // remove this line
    height: 25px;
    margin-bottom: 30px;
    padding: 20px;
}

Удаление строки приведет к хаосу с вашими размерами ввода, поэтому вы можете добавить общее правило для выбора размера окна в свой CSS.

*, *:before, *:after {
    -moz-box-sizing: border-box;
}

Ответ 4

Попробуйте уменьшить верхнюю и нижнюю прокладки. Некоторые, как вертикальная прокладка покрывает заполнитель. Не забудьте установить height элемента в 100%.

input[type="email"], input[type="password"], input[type="text"] { padding: 0 20px; height: 100%; }