HTML5 Arama Girişi: Chrome'da Arka Plan Resmi Yok mu?

Question

Chrome'u search girişimi arka plan resmiyle şekillendirmeye çalışırken saçlarımı çekiyorum. Firefox'un bir sorunu yok, ama korkarım ki girdiyi normal bir metin girdisi olarak ele alıyor. Bu mümkün değil mi?

bir demo olarak bu deneyin:

<input type="search" /> 

​input[type="search"] { 
background: transparent 
    url(http://google.com/intl/en_ALL/images/srpr/logo1w.png) no-repeat 0 0; 
}​​​​​​ 

doğru çözmezse, bu "Ara" girişi için arka plan görüntüsü olarak Google'ın logosunu (veya bir kısmını) koymak gerekir. Ancak Chrome’a baktığınız zaman göreceğiniz gibi, ÇALIŞMAZ. Herhangi bir fikir, ya da bu HTML5'in tuhaflarından sadece biri mi? : \

Answer 1

Dediğiniz gibi, Mozilla arama girişlerini metin olarak ele alır. Ancak Webkit tarayıcıları için (Chrome, Safari), arama girişi dahili Webcore Kakao NSSearchField için istemci tarafından oluşturulmuş bir HTML sarıcı olarak tasarlanmıştır. Bu, yuvarlak kenarlar ve içindeki metin olduğunda kendini temizlemek için 'x' düğmesini veren şeydir. Maalesef bu ekstra özellikler sadece CSS/JS tarafından erişilememekle kalmıyor aynı zamanda CSS özelliklerinin bu elemente ve diğer yeni HTML5 öğelerine nasıl uygulanabileceğine dair bir W3 özelliği de yok gibi görünüyor. Böyle bir özellik bulunana kadar tutarlı bir davranışa sahip olmayı beklemezdim.

Answer 2

erişebilmek için CSS'nizde bu uygularsanız (arka plan resimleri de dahil) bir HTML5 arama alanında kendi stilleri ile iyi birlikte oynamak Chrome (ve Safari) olsun:

-webkit-görünüm: none;

Ayrıca -webkit-box-boyutlandırma için değiştirmek isteyebilirsiniz

...

-webkit-box-boyutlandırma: içerik kutusu;

... Webkit'in bunu varsayılan olarak sınır kutusu değerine (temelde eski IE5 kutusu modeli) ayarladığı anlaşılıyor.

Dikkat edin, alan temizleme düğmesinin konumu/görünümü üzerinde herhangi bir etkiye sahip olmaya dair hala (görünür) bir yol var ve yalnızca Webkit bu düğmeyi oluşturduğundan, başa çıkmak için yeni tarayıcılar sıkıntısı çekebilirsiniz. .

Answer 3

iptal düğmesi ile tarz edilebilir aşağıdaki

input[type="search"]::-webkit-search-cancel-button { 

    /* Remove default */ 
    -webkit-appearance: none; 

    /* Now your own custom styles */ 
    height: 10px; 
    width: 10px; 
    background: red; 
    /* Will place small red box on the right of input (positioning carries over) */ 

} 

Şekillendirme tarayıcısı kaynaklanan tüm ekstra tasarım kaldırmak için

input[type="search"]::-webkit-search-decoration, 
input[type="search"]::-webkit-search-cancel-button, 
input[type="search"]::-webkit-search-results-button, 
input[type="search"]::-webkit-search-results-decoration { 
    display: none; 
} 

http://css-tricks.com/7261-webkit-html5-search-inputs/

Answer 4

Komple çözüm kullanarak çıkarılabilir. Bu i Bahsettiğin yuvarlak kenarları görmüyorum ... Normal giriş alanına

input[type="search"]::-webkit-search-decoration, 
input[type="search"]::-webkit-search-cancel-button, 
input[type="search"]::-webkit-search-results-button, 
input[type="search"]::-webkit-search-results-decoration { 
    display: none; 
} 
input[type="search"]{ 
    -webkit-appearance: none; 
    -webkit-box-sizing: content-box; 
    outline:none; 
}