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="support@socialpic.org" 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

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="support@socialpic.org" 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