Safari ve Chrome'da metin girdi(textbox) alanlarını kenar çizgileri kaldıralım
Safari ve Google Chrome tarayıcıları her hangi bir metin girdi alanına(text input) odaklandığında bu elemanın etrafını bir şerit ile belirliyor.
Google Chrome Normal Hali
Google Chrome Odaklanmış Hali
Safari Normal Hali
Safari Odaklanmış Hali
Bu normalde güzel bir özellik, ancak biz eğer standart metin girdi alanı yerine kendi tasarladığımız bir metin girdi alanı koydu isek bu odaklanma çizgileri sorun çıkarıyor. Bir örnek yapalım.
En son projelerimden bonus.com.tr'de böyle bir sorun ile karşılaştığımda buna bir çözüm aradım. İlk kodum şöyle idi.
{% highlight html %}
{% endhighlight %}
Bu kodlarım Firefox ve IE'de sorunsuz çalıştı. Daha sonra sayfayı Google Chrome'da test ettiğimde aşağıdaki gibi bir sorun ile karşılaştım.
Sorunun çözümünü araştırdığımda dış kenar çizgisini sıfırlamam gerektiğini gördüm.
{% highlight css %} input{ outline:0 } {% endhighlight %}
tanımı bizi çözüme ulaştırdı.
Örnek kodu görmnek için tıklayınız.
Peki dış hat çizgisini kaldrımayalım demiştik şimdi ise kaldırdık, ne olacak şimdi? Burada odaklanma durumu için bir sınıf atayıp ona ayrı bir tanım yaptığımız için klavye kullananlar için sorun olmayacaktır.
Kaynaklar
- gandamanurung.com/css/how-to-get-rid-textinput-blue-border-in-safari/ (google chrome safari de mavi kenarları yok etmek)
- forums.devshed.com/css-help-116/safari-input-focus-blue-border-477819.html
- http://dev.markhaus.com/blog/2009/03/how-to-annul-safaris-outline-effect-in-input-fields-and-friends
- http://www.usabilitypost.com/2008/10/15/css-tip-remove-mac-osx-glowing-blue-outlin-for-custom-styled-input-fields/
- http://www.infoqu.com/dev/css-help/safari-input-fields-142336-1/
