Focus border’ı silmek

Bir input(text, password v.s.) ya da bir textarea‘ya tıkladığınız zaman tarayıcılarda varsayılan olarak tıkladığınız elementlere çerçeve ekler. Firefox ve Internet Explorer‘da çok belirgin olmasa da Webkit tabanlı tarayıcılarda (Chrome, Safari, Konqueror) sarı kalın bir çerçeve ile kendini belli eder. Bazı tasarımlarda bu istenmeyen bir durumdur. Özellikle input, textarea stili için background özelliği kullanılıyorsa. Ben çoğunlukla varsayılan dışında stiller kullandığım için bu özelliği direk reset.css‘e ekledim.

Webkit Focus Border

Bu çerçeveden kurtulmak için input, textarea focus‘u için CSS outline özelliğini kullanılabilir. Hatta istenirse select için de kullanılabilir.

input:focus,
textarea:focus,
select:focus {
  outline:none
}

Yukarıda dediğim gibi bu sadece özel durumlar için kullanılması gereken bir kod. Stil dosyasına ekledikten sonra unutup gidilecek birşey değil. Sonra “Niye çerçeve çıkmıyor?” diye aranmayın.

  • Placeholder kodu var, formlardaki blurlu yazının gösterilmesine yarıyor, biliyorsunuz. Bunun yerine javascript mi yazılmalı sizce ? Çünkü w3c hata veriyor, döküman tipi bu kodu desteklemiyor.

    • W3C’nin hata vermesi Doctype ile ilgili olabilir. Keza “placeholder” HTML5’te bulunan bir özellik. Farklı bir Doctype kullanıyorsan bu hatayı görebilirsin.

      Bununla ilgili en düzgün çözüm javascript olacaktır. Bir jQuery eklentisi yazmıştım. Onu kullanabilirsin: http://codersgrave.com/894-input-mask/

      Ya da alternatif olarak bu eklentiyi de kullanabilirsin. Bu da oldukça başarılı: http://fuelyourcoding.com/scripts/infield/