Hvordan kan jeg sentrere inndatafeltets plassholder i et html-skjema?
Jeg bruker følgende kode, men det fungerer ikke:
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>
Hvis du bare vil endre stilen for plassholderen
::-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;
}
er alt du trenger.
[Arbeidseksempel][1] i FF6. Denne metoden ser ikke ut til å være kompatibel på tvers av nettlesere.
Din forrige CSS forsøkte å sentrere teksten i et input-element som hadde klassen "placeholder".
HTML5-plassholderelementet kan utformes for de nettleserne som godtar elementet, men på forskjellige måter, som du kan se her: http://davidwalsh.name/html5-placeholder-css.
Men jeg tror ikke at text-align
vil bli tolket av nettleserne. I hvert fall i Chrome ignoreres dette attributtet. Men du kan alltid endre andre ting, som color
, font-size
, font-family
osv. Jeg foreslår at du tenker gjennom designet ditt på nytt om det er mulig å fjerne denne senteroppførselen.
**REDIGERER
Hvis du virkelig vil ha denne teksten sentrert, kan du alltid bruke litt jQuery-kode eller plugin for å simulere plassholderens oppførsel. Her er et eksempel: http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html.
På denne måten vil stilen fungere:
input.placeholder {
text-align: center;
}