Espace réservé de champ de texte d'entrée HTML central

Comment puis-je centrer l'alignement de l'espace réservé du champ de saisie dans un formulaire html?

J'utilise le code suivant, mais cela ne fonctionne pas:

CSS ->

input.placeholder {
    text-align: center;
}
.emailField {
    top:413px;
    right:290px;
    width: 355px;
    height: 30px;
    position: absolute;
    border: none;
    font-size: 17;
    text-align: center;
}

HTML ->

<form action="" method="POST">
    <input type="text" class="emailField" placeholder="[email protected]" style="text-align: center" name="email" />
    <!<input type="submit" value="submit" />  
</form>

Si vous souhaitez modifier uniquement le style d'espace réservé

::-webkit-input-placeholder {
   text-align: center;
}

:-moz-placeholder { /* Firefox 18- */
   text-align: center;  
}

::-moz-placeholder {  /* Firefox 19+ */
   text-align: center;  
}

:-ms-input-placeholder {  
   text-align: center; 
}

input{
   text-align:center;
}

est tout ce dont vous avez besoin.

Exemple de travail dans FF6. Cette méthode ne semble pas compatible avec plusieurs navigateurs.

Votre CSS précédent tentait de centrer le texte d'un élément d'entrée qui avait une classe de "placeholder".

L'élément d'espace réservé HTML5 peut être stylisé pour les navigateurs qui acceptent l'élément, mais de différentes manières, comme vous pouvez le voir ici: http://davidwalsh.name/html5-placeholder-css .

Mais je ne pense pas que cela text-alignsera interprété par les navigateurs. Au moins sur Chrome, cet attribut est ignoré. Mais vous pouvez toujours changer d' autres choses, comme color, font-size, font-familyetc. Je vous suggère de repenser votre conception si possible de supprimer ce comportement central.

ÉDITER

Si vous voulez vraiment que ce texte soit centré, vous pouvez toujours utiliser du code jQuery ou un plugin pour simuler le comportement de l'espace réservé. En voici un exemple: http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html .

De cette façon, le style fonctionnera:

input.placeholder {
    text-align: center;
}

Vous pouvez faire comme ceci:

    <center>
    <form action="" method="POST">
    <input type="text" class="emailField" placeholder="[email protected]" style="text-align: center" name="email" />
    <input type="submit" value="submit" />  
</form>
    </center>

Code de travailPen ici

Cela fonctionne bien pour mes besoins, vous devriez vérifier la compatibilité de votre navigateur, je n'ai pas eu de problèmes car je ne me souciais pas de la compatibilité descendante

.inputclass::-webkit-input-placeholder {
text-align: center;
}
.inputclass:-moz-placeholder { /* Firefox 18- */
text-align: center;  
}
.inputclass::-moz-placeholder {  /* Firefox 19+ */
text-align: center;  
}
.inputclass:-ms-input-placeholder {  
text-align: center; 
}

vous pouvez également utiliser cette méthode pour écrire des css pour l'espace réservé

input::placeholder{
   text-align: center;
}

Vous pouvez essayer comme ceci:

input[placeholder] {
   text-align: center;
}

::-webkit-input-placeholder {
 font-size: 14px;
 color: #d0cdfa;
 text-transform: uppercase;
 text-transform: uppercase;
 text-align: center;
 font-weight: bold;
}
:-moz-placeholder { 
 font-size:14px;
 color: #d0cdfa;
 text-transform: uppercase;
 text-align: center;
 font-weight: bold;
}
::-moz-placeholder { 
 font-size: 14px;
 color: #d0cdfa; 
 text-transform: uppercase;
 text-align: center;
 font-weight: bold;
} 
:-ms-input-placeholder { 
 font-size: 14px; 
 color: #d0cdfa;
 text-transform: uppercase;
 text-align: center;
 font-weight: bold;
}

En utilisant l'extrait de code ci-dessous, vous sélectionnez l'espace réservé à l'intérieur de votre entrée, et tout code placé à l'intérieur n'affectera que l'espace réservé.

input::-webkit-input-placeholder {
      text-align: center
}

Vous pouvez utiliser set dans une classe comme ci-dessous et définir pour saisir la classe de texte
CSS:

 .place-holder-center::placeholder {
        text-align: center;
    }

HTML:

<input type="text" class="place-holder-center">