Bagaimana cara menyelaraskan teks di dalam input?

Untuk semua input default, teks yang Anda isi dimulai di sebelah kiri. Bagaimana Anda membuatnya mulai di sebelah kanan?

Gunakan properti perataan teks di CSS Anda:

input { 
    text-align: right; 
}

Ini akan berlaku di semua input halaman.
Jika tidak, jika Anda ingin menyelaraskan teks hanya dengan satu input, setel style inline:

<input type="text" style="text-align:right;"/> 

Coba ini di CSS Anda:

input {
text-align: right;
}

Untuk menyelaraskan teks di tengah:

input {
text-align: center;
}

Tapi, itu harus kiri-sejajar, karena itu adalah default - dan tampaknya paling ramah pengguna.

Ini dia :

input[type=text] { text-align:right }

<form>
    <input type="text" name="name" value="">
</form>

Jawaban yang diterima di sini benar tetapi saya ingin menambahkan sedikit info. Jika Anda menggunakan pustaka / framework seperti bootstrap mungkin ada dibangun di kelas untuk ini. Misalnya bootstrap menggunakan text-rightkelas. Gunakan seperti ini:

<input type="text" class="text-right"/> 
<input type="number" class="text-right"/>

Sebagai catatan ini juga berfungsi pada tipe input lain, seperti numerik seperti yang ditunjukkan di atas.

Jika Anda tidak menggunakan kerangka kerja yang bagus seperti bootstrap maka Anda dapat membuat versi sendiri dari kelas pembantu ini. Mirip dengan jawaban lain tetapi kami tidak akan menambahkannya langsung ke kelas input sehingga tidak berlaku untuk setiap input tunggal di situs atau halaman Anda, ini mungkin bukan perilaku yang diinginkan. Jadi ini akan membuat kelas css mudah yang bagus untuk menyelaraskan hal-hal yang benar tanpa perlu styling inline atau mempengaruhi setiap kotak input tunggal.

.text-right{
    text-align: right;
}

Sekarang Anda dapat menggunakan kelas ini persis sama dengan input di atas class="text-right". Saya tahu itu tidak menyimpan banyak stroke kunci tetapi itu membuat kode Anda lebih bersih.

Jika Anda ingin menyelaraskannya ke kanan setelah teks kehilangan fokus Anda dapat mencoba menggunakan pengubah arah. Ini akan menampilkan bagian kanan teks setelah kehilangan fokus. mis berguna jika Anda ingin menunjukkan nama file di jalur besar.

input.rightAligned {
  direction:ltr;
  overflow:hidden;
}
input.rightAligned:not(:focus) {
  direction:rtl;
  text-align: left;
  unicode-bidi: plaintext;
  text-overflow: ellipsis;
}

<form>
    <input type="text" class="rightAligned" name="name" value="">
</form>

Pemilih tidak saat ini didukung dengan baik: Dukungan browser

@ Html.TextBoxFor (model => model.IssueDate, {@class = "form-control" baru, name = "inv_issue_date", id = "inv_issue_date", judul = "Pilih Tanggal Masalah Faktur", placeholder = "dd / mm / yyyy ", style =" text-align: center; "})

Tanpa CSS: Gunakan properti STYLE dari input teks

STYLE = "text-align: right;"