Center HTML Input Text Place Placeholder

153

Bagaimana saya bisa memusatkan penyelarasan placeholder bidang input dalam bentuk html?

Saya menggunakan kode berikut, tetapi tidak berfungsi:

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>
html css maks_
sumber
Bukan jawaban, tetapi jQuery Mobile melakukan ini sehingga Anda mungkin ingin melihat bagaimana mereka mencapainya.
Evanss
Bagi saya, kode Anda berfungsi saat Anda menyingkirkan input.placeholderbit. Menyelaraskan teks di dalam input ke tengah juga menyelaraskan placeholder.
Cannicide

Jawaban:

283

Jika Anda ingin mengubah hanya 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; 
}
prarthana.m
sumber
5
Ini berfungsi dengan baik untuk sebagian besar bidang input, tetapi tidak untuk tipe tanggal. Apakah Anda tahu cara membuatnya bekerja untuk kencan?
Cornelius Parkin
92 
input{
   text-align:center;
}

itu yang kamu butuhkan.

Contoh kerja di FF6. Metode ini tampaknya tidak kompatibel lintas-browser.

CSS Anda sebelumnya berusaha memusatkan teks elemen input yang memiliki kelas "placeholder".

Jamie Dixon
sumber
5
Saya tidak ingin memusatkan placeholder dan juga teks yang dimasukkan ke dalam bidang
max_
1
Iya. Inilah yang dilakukan contoh ini. Placeholder adalah teks di bidang.
Jamie Dixon
2
itu tidak berfungsi dalam contoh. Dalam contoh, placeholder dibiarkan selaras.
maks_
Hati-hati, jika Anda menggunakan pustaka seperti Bootstrap atau Semantic UI, Anda harus menambahkan style inline, yaitu <input type="text" placeholder="Search..." style="text-align: right;">agar bisa berfungsi. Atau tambahkan important!ke aturan CSS Anda jika Anda menggunakan file eksternal.
Behdad
Sepertinya masalah yang Anda miliki max_ hanyalah masalah kompatibilitas browser. Ini berfungsi baik di sebagian besar browser utama kecuali Safari.
Cannicide
7

Elemen placeholder HTML5 dapat ditata untuk browser yang menerima elemen, tetapi dengan cara yang berbeda, seperti yang Anda lihat di sini: http://davidwalsh.name/html5-placeholder-css .

Tapi saya tidak percaya itu text-alignakan ditafsirkan oleh browser. Paling tidak di Chrome, atribut ini diabaikan. Tapi Anda selalu dapat mengubah hal-hal lain, seperti color, font-size, font-familydll saya sarankan Anda memikirkan kembali desain Anda apakah mungkin untuk menghapus perilaku pusat ini.

EDIT

Jika Anda benar-benar ingin teks ini terpusat, Anda selalu dapat menggunakan beberapa kode atau plugin jQuery untuk mensimulasikan perilaku placeholder. Berikut adalah contohnya: http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html .

Dengan cara ini gaya akan bekerja:

input.placeholder {
    text-align: center;
}
Erick Petrucelli
sumber
7

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>

Kerjakan Kode Di sini

Ian David Bocioaca
sumber
Hanya ini yang bekerja untuk saya. Mungkin gaya yang ditambahkan dalam HTML diberikan prioritas lebih atau mengesampingkan semua gaya lainnya.
Gokul
5

Ini berfungsi dengan baik untuk kebutuhan saya, Anda harus memeriksa kompatibilitas untuk browser Anda, saya tidak memiliki masalah karena saya tidak peduli dengan kompatibilitas ke belakang

.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; 
}
Denis
sumber
3
Bukankah jawaban ini merupakan salinan langsung dari jawaban lain?
Anwar
3

Anda juga dapat menggunakan cara ini untuk menulis css untuk placeholder

input::placeholder{
   text-align: center;
}
Ankit Jaiswal
sumber
2

Anda dapat mencoba seperti ini:

input[placeholder] {
   text-align: center;
}
Rani Utami
sumber
1 
::-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;
}
Rudresh Bhatt
sumber
0

Dengan menggunakan cuplikan kode di bawah ini, Anda memilih placeholder di dalam input Anda, dan kode apa pun yang ditempatkan di dalam hanya akan memengaruhi placeholder. 

input::-webkit-input-placeholder {
      text-align: center
}
Brandon May
sumber
Jawaban ini sepertinya tidak menawarkan sesuatu yang berbeda dibandingkan dengan Jawaban yang Diterima .
Anton Menshov
Jawaban ini memang memberi petunjuk tentang cara mengganti placeholder dari hanya satu elemen spesifik yang bertentangan dengan semua placeholder. Misalnya .foo::-webkit-input-placeholder { … }.
Henrik N
0

Anda dapat menggunakan set di kelas seperti di bawah ini dan mengatur untuk memasukkan
CSS kelas teks :

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

HTML:

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