Symbole zastępcze wprowadzania tekstu niewidoczne w IE i Firefox

Question

Symbole zastępcze wprowadzania tekstu nie wyświetlają się w IE i Firefox pomimo użycia atrybutu -moz-placeholder. Można to zobaczyć pod adresem on the contact page here, jeśli używasz przeglądarki Firefox lub IE.

Czy ktoś może mi pomóc? Próbowałem to rozgryźć od tygodni. Próbkę mojego kodu jest poniżej:

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

Jak luke2012 stwierdził to się dzieje, gdy box-sizing: border-box; jest używany na polach wejściowych typu tekst. Dzieje się tak jednak tylko wtedy, gdy używana jest stała wysokość (na przykład w strukturze Bootstrap) i jest zbyt dużo padów górnych i dolnych. Co nie tylko zapobiega wyświetlaniu tekstu zastępczego, ale także tekstowi wejściowemu w Firefoksie.

Uważam, że lepszym rozwiązaniem jest zachowanie box-sizing: border-box;, a zamiast tego usunięcie górnego i dolnego marginesu i zwiększenie wysokości do całkowitej wysokości, którą ma mieć pole wejściowe (w tym obramowanie).

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 
} 

Zapewnia to większą spójność i działa dobrze na frameworkach takich jak Bootstrap.

Ewentualnie można zwiększyć stałą wysokość lub ustawić height: auto; i odpowiednio wyregulować górną i dolną wyściółkę.

Answer 2

Wydaje -moz-box-sizing jest przyczyną problemu.

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

Demontaż linii będą grać spustoszenie z wejściem rozmiarach, dzięki czemu można dodać ogólną zasadę box-zaklejania do 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

Spróbuj zmniejszyć górną i dolną wykładzinę. W jaki sposób wypełnienie pionowe obejmuje element zastępczy. Nie zapomnij ustawić elementu height na 100%.

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