CSS. Platzhalter und Textfeld mit verschiedenen Schriftgrößen

Question

Ich habe ein Eingabefeld mit der Schriftgröße 45px. Dieses Feld sollte einen Platzhalter mit einer Schriftgröße 18px haben und die vertikale Ausrichtung des Platzhalters sollte die Mitte sein. Ich habe den folgenden Code ausprobiert, funktioniert aber nicht in Chrome und Opera.

Können Sie mir helfen, eine Lösung ohne JavaScript zu finden.

<input type="text" placeholder="Start typing your postal code..." /> 

    input { 
     width: 300px; 
     border: 2px solid red; 
     padding: 0px 5px; 
     line-height: 100px; 
     font-size: 45px; 
    } 

    ::-webkit-input-placeholder { 
     font-size: 18px; 
     vertical-align: middle !important; 
     line-height: 100px !important; 
     color:#000; 
     text-align:center; 
    } 
    ::-moz-placeholder { 
     font-size: 18px; 
     vertical-align: middle; 
     line-height: 100px; 
     color: #000; 
     text-align: center; 
    } 
    :-ms-input-placeholder { 
     font-size: 18px; 
     vertical-align: middle; 
     line-height: 100px; 
     color: #000; 
     text-align: center; 
    } 
    :-moz-placeholder { 
     font-size: 18px; 
     vertical-align: middle; 
     line-height: 100px; 
     color: #000; 
     text-align: center; 
    } 

Answer 1

Ich denke, Sie müssen input vor Ihrem Pseudo-Element hinzufügen. Versuchen Sie folgendes:

input::-webkit-input-placeholder { 
    font-size: 18px; 
    vertical-align: middle; 
    line-height: 100px; 
    color: #000; 
    text-align: center; 
} 

input::-moz-placeholder { 
    font-size: 18px; 
    vertical-align: middle; 
    line-height: 100px; 
    color: #000; 
    text-align: center; 
} 

input:-ms-input-placeholder { 
    font-size: 18px; 
    vertical-align: middle; 
    line-height: 100px; 
    color: #000; 
    text-align: center; 
} 

input::placeholder { 
    font-size: 18px; 
    vertical-align: middle; 
    line-height: 100px; 
    color: #000; 
    text-align: center; 
} 

EDIT

Styling Platzhalter begrenzt scheint. Aber ein Weg, um es zu tun wäre transform: translate(0, -50%);

input::placeholder { 
    font-size: 18px; 
    line-height: 100px; 
    text-align: center; 
    transform: translate(0, -50%); 
}