HTML5 yer tutucu css dolgusu

Bu gönderiyi zaten gördüm ve yer tutucu ama ne yazık ki dolgu değiştirmek için elimden gelen her şeyi denedim, sadece işbirliği yapmak istemiyor gibi görünüyor.

Her neyse, işte css kodu. ( DÜZENLEME : Bu, sass'tan oluşturulan css'dir)

#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;
}

Ve işte basit html:

<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>

Gayet basit? yer tutucu bir nedenden dolayı kapalı, ancak giriş alanına yazmaya çalıştığınızda metin hizalandı. Görünüşe göre yalnızca webkityer tutucunun rengini (için ) değiştirebilirsiniz , ancak içeren girdinin dolgusunu düzenlemeye çalışırsam, girişin tasarımını bozar! saç çıkarır

Yer tutucunun ve metin girişli giriş alanının ekranları şunlardır:

DÜZENLE :

Şimdilik bu jquery eklentisine başvurdum .

Kutudan çıkar çıkmaz çalışır ve kromumun sorununu çözer. Hala sorunun ne olduğunu ortaya çıkarmak istiyorum (eğer kromum veya başka bir şeyle ilgisi varsa)

John Catterfeld bunu sorunsuz bir şekilde yeniden ürettiğinden beri bu tarzlar olmadığından eminim, bu yüzden orada birisinin bana neden bunun bana doğru olduğu konusunda (müşterimin kromu da) doğru yönü gösterebileceğini umuyorum. John pencereler kullanıyorsa, bu muhtemelen Chrome / OSX için yereldir)

Ben de aynı sorunu yaşadım.

Girişimden satır yüksekliğini kaldırarak düzelttim. Soruna neden olan bir satır yüksekliği olup olmadığını kontrol edin

Benzer bir sorunum vardı, sorunum yan dolgu ile oldu ve çözüm, metin girintisi ile, metin girintisinin yer tutucu yan konumunu etkilediğinin farkında değildim.

input{
  text-indent: 10px;
}

Satır yüksekliğinizi korumak ve yer tutucuyu aynı olmaya zorlamak istiyorsanız, daha yeni tarayıcı sürümlerinden bu yana yer tutucu CSS'yi doğrudan düzenleyebilirsiniz. Bu benim için hile yaptı:

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; 

benim için çalıştı;)

Satır yüksekliğini kaldırmak metninizi yer tutucu metninizle hizalar, ancak tasarımınızı bu kusura uyarlamanız gerektiğinden sorununuzu düzgün bir şekilde çözmez (bu bir hata değildir). Dikey hizalama eklemek de anlaşma yapmaz. Tüm tarayıcılarda denemedim, ancak Safari 5.1.4'te çalışmıyor.

Bunun için çapraz tarayıcı yer tutucu desteği (jQuery.placeholder) değil, yer tutucuları şekillendirmek için bir jQuery düzeltmesi duydum, ancak henüz bulamadım.

Bu arada, bu sayfadaki farklı stiller için farklı tarayıcı desteği gösteren tabloyu çözebilirsiniz .

Düzenleme: Eklentiyi buldum! jquery.placeholder.min.js size tam stil yetenekleri ve pazarlık için çapraz tarayıcı desteği sunar.

Sadece internet explorer'da görünen bir sorunum vardı. Giriş alanı stilize edildi

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

Ne yazık ki IE'de ilk yer tutucu doğru konumda görünmüyor. Ancak alanı tıklattıktan sonra bu alanı terk ettiğimde, yer tutucu doğru konumda göründü.

Benim çözümüm:

line-height:normal;

line-height: 0px;Chrome'da benim için ayarlama düzeltildi

Ekran görüntünüzü bir arka plan görüntüsü olarak kullanarak ve ekstra işaretlemeyi çıkartan bir keman oluşturdum ve iyi çalışıyor gibi görünüyor

http://jsfiddle.net/fLdQG/2/ (webkit tarayıcısı gereklidir)

Bu senin için uygun mu? Değilse, kemanı tam işaretlemeniz ve CSS'nizle güncelleyebilir misiniz?

OS x üzerinde Chrome'u en son kararlı sürüme (9.0.597.94) güncellediğimde sorunu fark ettim, bu bir Chrome hatası ve umarım düzeltilecektir.

Bu soruna geçici bir çözüm bulmaya bile çalışmıyorum ve sadece düzeltmeyi bekliyorum. Bu sadece onu çıkarmak için daha fazla iş anlamına gelecektir.

Yer tutucu tarayıcılardan etkilenmez line-heightve paddingtarayıcılarda tutarsızdır.

Yine de başka bir çözüm buldum.

VERTICAL-ALIGN. Muhtemelen çalıştığı tek zaman budur, ancak bunun yerine deneyin ve birçok CSS kodu satırı mağaralayın.

Satır yüksekliğini kaldırın veya dolgu kullanarak ayarlayın ... tüm tarayıcılarda çalışıyor

John Catterfeld'in blogunda bununla ilgili hayal kırıklıklarımı gideren cevabı buldum .

... Krom (v20-30) neredeyse tüm stilleri uygular, ancak büyük bir uyarı ile - yer tutucu stilleri giriş kutusunu yeniden boyutlandırmaz, bu nedenle satır yüksekliği ve üst veya alt dolgu gibi şeylerden uzak durun.

Satır yüksekliği veya dolgu kullanıyorsanız, ortaya çıkan yer tutucuyu hayal kırıklığına uğratabilirsiniz. Bu noktaya kadar bunun için bir yol bulamadım.

Yer tutucu metnini sağa taşımak ve imleci boş alanda bırakmak istiyorsanız, yer tutucu özelliğinin başına boşluk eklemeniz gerekir:

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

Açısal uygulamam için bu sayfada verilen hemen hemen tüm yöntemleri test ettim. Sadece  boşluklar ekleyen bir çözüm buldum yani

Açısal Malzeme

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

Açısal Olmayan Malzeme

<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>