web-dev-qa-db-fra.com

Taille de police supérieure à 16 px

J'ai lu quelques articles sur le style de l'espace réservé d'un champ de saisie à l'aide de ::-webkit-input-placeholder en HTML5. Cela fonctionne parfaitement, sauf pour une chose.

Si j'essaie d'augmenter la taille de la police à une valeur supérieure à 16 px, le texte est "coupé" en bas. Cela se produit indépendamment de la hauteur et du remplissage de l'entrée elle-même. Est-ce que quelqu'un connaît un moyen d'éviter ce problème, en utilisant du CSS pur ou du javascript?

J'ai ajouté une capture d'écran de deux champs d'entrée où les espaces réservés ont une taille de police de 20 pixels.

enter image description here

Jsfiddle: https://jsfiddle.net/bvwdg86x/

csshtml5placeholder
25
Valdemar Edvard Sandal Rolfsen

L'entrée et son espace réservé doivent avoir des styles de police correspondants

input {
    width: 400px;
    padding: 0 20px;
}

input,
input::-webkit-input-placeholder {
    font-size: 20px;
    line-height: 3;
}
<input type="text" placeholder="My Cool Placeholder Text">

52
gfullam

Les styles d'espace réservé ne redimensionnent pas un champ de saisie et n'affectent pas son modèle de boîte. Ajoutez une taille de police à votre saisie pour éviter que l’espace réservé ne soit coupé.

Vous pouvez également envisager d'ajouter des styles d'espace réservé pour d'autres navigateurs ...

::-moz-placeholder {} /* Firefox 19+ */
:-moz-placeholder {}  /* Firefox 18- */
:-ms-input-placeholder {} /* IE */
10
Dave O'Brien

input {
    width: 450px;
    padding: 0px 15px;
}

input,
input::-webkit-input-placeholder {
    font-size: 25px;
    line-height: 4;
}
<input type="text" placeholder="My Cool Placeholder Text">

0
imnik18