Padding placeholder css HTML5

Saya telah melihat posting ini dan mencoba semua yang saya bisa untuk mengganti padding untuk placeholder saya tetapi sayangnya, sepertinya tidak mau bekerja sama.

Bagaimanapun, ini adalah kode untuk css. ( EDIT : Ini adalah css yang dihasilkan dari sass)

#search {
  margin-top: 1px;
  display: inline;
  float: left;
  margin-left: 10px;
  margin-right: 10px;
  width: 220px;
}

#search form {
  position: relative;
}

#search input {
  padding: 0 10px 0 29px;
  color: #555555;
  border: none;
  background: url('/images/bg_searchbar.png?1296191141') no-repeat;
  width: 180px;
  height: 29px;
  overflow: hidden;
}

#search input:hover {
  color: #00ccff;
  background-position: 0px -32px;
}

Dan inilah html sederhana:

<div id="search">
  <form>
    <input type="text" value="" placeholder="Search..." name="q" autocomplete="off" class="">
  </form>
  <div id="jquery-live-search" style="display: block; position: absolute; top: 15px; width: 219px;">
    <ul id="search-results" class="dropdown">
    </ul>
  </div>
</div>

Cukup mudah? placeholder tidak aktif karena beberapa alasan tetapi ketika Anda mencoba mengetik di bidang input, teksnya rata. Tampaknya Anda hanya dapat mengubah warna (untuk webkit) placeholder, tetapi jika saya mencoba mengedit bantalan input yang berisi, itu merusak desain input!mencabut rambut

Berikut ini adalah layar placeholder dan bidang input dengan input teks:

EDIT :

Untuk saat ini saya telah menggunakan plugin jquery ini .

Ini berfungsi langsung dari kotak dan itu memperbaiki masalah chrome saya. Saya masih ingin mengungkap apa masalahnya (jika ada hubungannya dengan MY chrome atau sesuatu)

Saya cukup yakin itu bukan gaya karena John Catterfeld memperbanyaknya tanpa masalah, jadi saya berharap seseorang di luar sana masih bisa mengarahkan saya ke arah yang benar tentang mengapa hal ini terjadi pada saya (krom klien saya juga. Jadi ini mungkin asli Chrome / OSX jika John menggunakan windows)

Saya mendapat masalah yang sama.

Saya memperbaikinya dengan menghapus ketinggian garis dari input saya. Periksa apakah ada beberapa garis yang menyebabkan masalah

Saya memiliki masalah yang sama, masalah saya adalah dengan side padding, dan solusinya adalah dengan indentasi teks, saya tidak menyadari bahwa indentasi teks mempengaruhi posisi sisi placeholder.

input{
  text-indent: 10px;
}

Jika Anda ingin mempertahankan ketinggian garis dan memaksa placeholder untuk memiliki yang sama, Anda dapat langsung mengedit placeholder CSS sejak versi browser yang lebih baru. Itu berhasil bagi saya:

input::-webkit-input-placeholder { /* WebKit browsers */
  line-height: 1.5em;
}
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  line-height: 1.5em;
}
input::-moz-placeholder { /* Mozilla Firefox 19+ */
  line-height: 1.5em;
}
input:-ms-input-placeholder { /* Internet Explorer 10+ */
  line-height: 1.5em;
}

line-height: normal; 

bekerja untukku;)

Menghapus ketinggian garis memang membuat teks Anda sejajar dengan teks-tempat Anda, tetapi itu tidak menyelesaikan masalah Anda dengan benar karena Anda perlu menyesuaikan desain Anda dengan cacat ini (itu bukan bug). Menambahkan vertikal-align juga tidak akan membantu. Saya belum mencoba di semua browser, tetapi pasti tidak bekerja di Safari 5.1.4.

Saya telah mendengar tentang perbaikan jQuery untuk ini, itu bukan dukungan placeholder lintas-browser (jQuery.placeholder), tetapi untuk penampung penataan gaya, tapi saya belum menemukannya.

Sementara itu, Anda dapat menyelesaikan ke tabel di halaman ini yang menunjukkan dukungan browser yang berbeda untuk gaya yang berbeda.

Sunting: Ditemukan plugin! jquery.placeholder.min.js memberi Anda kemampuan styling penuh dan dukungan lintas-browser ke dalam tawar-menawar.

Saya punya masalah, yang muncul hanya di internet explorer. Kolom input ditata

height:38px;
line-height:38px;

Sayangnya di IE placeholder awal muncul tidak pada posisi yang benar. Tetapi ketika saya telah mengklik bidang dan kemudian meninggalkan bidang ini, placeholder muncul di posisi yang tepat.

Solusi saya adalah mengatur:

line-height:normal;

Pengaturan line-height: 0px;memperbaikinya untuk saya di Chrome

Saya telah membuat biola menggunakan tangkapan layar Anda sebagai gambar latar belakang dan menghapus mark-up tambahan, dan tampaknya berfungsi dengan baik

http://jsfiddle.net/fLdQG/2/ (diperlukan browser webkit)

Apakah ini Bekerja untukmu? Jika tidak, dapatkah Anda memperbarui biola dengan mark-up dan CSS yang tepat?

Saya perhatikan masalah ini saat saya memperbarui Chrome di os x ke rilis stabil terbaru (9.0.597.94) jadi ini adalah bug Chrome dan mudah-mudahan akan diperbaiki.

Saya tergoda untuk tidak mencoba mengatasi hal ini dan hanya menunggu perbaikannya. Itu hanya akan berarti lebih banyak pekerjaan menghilangkannya.

Placeholder tidak terpengaruh oleh line-heightdanpadding tidak konsisten pada browser.

Saya telah menemukan solusi lain.

VERTICAL-ALIGN. Ini mungkin satu-satunya waktu kerjanya tetapi coba itu dan mengacaukan banyak baris kode CSS.

Hapus ketinggian garis atau atur menggunakan bantalan ... ini berfungsi di semua browser

Saya menemukan jawaban yang memperbaiki rasa frustrasi saya mengenai hal ini di blog John Catterfeld .

... Chrome (v20-30) menerapkan hampir semua gaya tetapi dengan peringatan utama - gaya placeholder tidak mengubah ukuran kotak input, jadi jauhi hal-hal seperti tinggi garis dan bantalan bagian atas atau bawah.

Jika Anda menggunakan ketinggian garis atau bantalan, Anda akan frustrasi dengan placeholder yang dihasilkan. Saya belum menemukan jalan keluar sampai saat ini.

Jika Anda ingin memindahkan teks placeholder ke kanan dan meninggalkan kursor di ruang kosong, Anda perlu menambahkan spasi di awal atribut placeholder:

<input type="email" placeholder="  Your email" />

Saya telah menguji hampir semua metode yang diberikan di sini di halaman ini untuk aplikasi Angular saya. Hanya saya menemukan solusi melalui  sisipan yaitu spasi

Bahan Sudut

<input matInput type="text" class="pl-2" placeholder="&nbsp;&nbsp;Email">

Bahan Non Sudut

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container m-3 d-flex flex-column align-items-center justify-content-around" style="height:100px;">
<input type="text" class="pl-0" placeholder="Email with no Padding" style="width:240px;">
<input type="text" class="pl-3" placeholder="Email with 1 rem padding" style="width:240px;">
</div>