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

Question

Мои помещики ввода текста отказываются отображать в IE и Firefox, несмотря на использование атрибута -moz-placeholder. Это можно просмотреть on the contact page here, если вы используете 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; 
} 

Answer 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; и при необходимости отрегулировать верхнюю и нижнюю прокладку.

Answer 2

кажется -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; 
} 

Answer 3

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

Answer 4

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

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