Bagaimana saya dapat centre input field's placeholder's keselarasan dalam form html?
Saya menggunakan kode berikut, tapi itu doesn't bekerja:
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>
Jika anda hanya ingin mengubah gaya placeholder
::-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;
}
adalah semua yang anda butuhkan.
[Contoh kerja][1] di FF6. Metode ini doesn't tampaknya lintas-browser yang kompatibel.
Sebelumnya CSS berusaha untuk pusat teks dari elemen input yang memiliki kelas "tempat".
Anda dapat membuat seperti ini:
<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>
HTML5 placeholder elemen dapat ditata bagi browser yang menerima unsur, tetapi dalam cara yang berbeda, seperti yang anda bisa lihat di sini: http://davidwalsh.name/html5-placeholder-css.
Tapi aku don't percaya bahwa text-align
akan ditafsirkan oleh browser. Setidaknya pada Chrome, atribut ini diabaikan. Tapi anda selalu dapat mengubah hal-hal lain, seperti warna
, font-size
, font-family
dll. Saya sarankan anda memikirkan kembali desain anda apakah mungkin untuk menghapus pusat ini perilaku.
EDIT
Jika anda benar-benar ingin teks ini berpusat, anda dapat selalu menggunakan beberapa kode jQuery atau plugin untuk mensimulasikan perilaku placeholder. Berikut ini adalah contoh dari hal ini: http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html.
Cara ini gaya yang akan bekerja:
input.placeholder {
text-align: center;
}
Itu bekerja dengan baik untuk kebutuhan saya, anda harus memeriksa kompatibilitas untuk browser anda, Aku't memiliki masalah karena saya didn't peduli untuk kompatibilitas
.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;
}
::-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;
}