Fatih Hayrioğlu'nun not defteri » textbox http://www.fatihhayrioglu.com { CSS, HTML ve Javascript } Thu, 09 Feb 2012 08:44:49 +0000 en hourly 1 http://wordpress.org/?v=2012 Safari ve Chrome’da metin girdi(textbox) alanlarını kenar çizgileri kaldıralım http://www.fatihhayrioglu.com/safari-ve-chromeda-metin-girditextbox-alanlarini-kenar-cizgileri-kaldiralim/ http://www.fatihhayrioglu.com/safari-ve-chromeda-metin-girditextbox-alanlarini-kenar-cizgileri-kaldiralim/#comments Fri, 24 Jul 2009 07:54:51 +0000 fatih.hayrioglu http://www.fatihhayrioglu.com/?p=1282 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. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body{background-color:#52c520;}

.aramaMetinKutusu{
	background:url(images/arama_zemini.gif) 0 0 no-repeat;
	width:202px;
	height:29px;
}

.aramaMetinKutusuOdak{
	background:url(images/arama_zemini.gif) 0 -31px no-repeat;
	width:202px;
	height:29px;
}

.aramaMetinKutusu input{
	width:190px;
	margin:5px 0 0 4px;
	border:none;
}

.aramaMetinKutusuOdak input:focus{
	width:190px;
	margin:5px 0 0 4px;
	border:none;
	background-color:#F6FFD4
}

</style>
</head>

<body>
<div class="aramaMetinKutusu">
    <input type="text" name="arama" onfocus="this.parentNode.className='aramaMetinKutusuOdak'" onblur="this.parentNode.className='aramaMetinKutusu'" />
</div>
</body>
</html>

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.

chrome_odak

Sorunun çözümünü araştırdığımda dış kenar çizgisini sıfırlamam gerektiğini gördüm.  

input{
outline:0
}

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

]]> http://www.fatihhayrioglu.com/safari-ve-chromeda-metin-girditextbox-alanlarini-kenar-cizgileri-kaldiralim/feed/ 7 29 Temmuz 2008 web’den seçme haberler http://www.fatihhayrioglu.com/29-temmuz-2008-webden-secme-haberler/ http://www.fatihhayrioglu.com/29-temmuz-2008-webden-secme-haberler/#comments Tue, 29 Jul 2008 14:06:24 +0000 fatih.hayrioglu http://www.fatihhayrioglu.com/?p=557
  • CSS’de 20 adet genel karşılaşılan hatalar. Bağlantı
  • İnternette gezmeyi kolaylaştıran 50 Firefox eklentisi. Bağlantı
  • jQuery ipucu: açılır menüde seçili olan seçeneği ve değerini bulmak. Bağlantı
  • Javascript yazarken en hızlı kodu yazmak önemli. En hızlı döngüyü nasıl yazarız? Bağlantı
  • CSS ile sayfa planlaması için 40 adet ders, ipucu ve demolar. Bağlantı
  • CSS ile outline kesik çizgilerini kaldırmak. Bağlantı
  • Dikeyde kayan haber scripti yapımı. Bağlantı
  • Metin girdi alanlarını(textbox) CSS ile güzelleştirmek. Bağlantı
  • jQuery ile yapılmış güzel bir resim galerisi. Farklı bir galeri. Bağlantı
  • jQuery ile uygulamalarımıza klavye kısayolu eklemek. Bağlantı
  • 6 adet kullanışlı jQuery ipucu. Bağlantı
  • jQuery ile “çek-bırak” özellikli nesneler oluşturmak – eburhan.com Bağlantı
  • Geçen sene web ile uğraşanlar için anket düzenleyen A List Apart bu senede anket düzenlemiş. Türkiye’yi Asya kıtasına eklemişler dikkat. Bağlantı
  • CSS Sıfırlama Tekniği – webdeneyimleri.com Bağlantı
    • ]]>     http://www.fatihhayrioglu.com/29-temmuz-2008-webden-secme-haberler/feed/ 7