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.

01
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

02
<html xmlns="http://www.w3.org/1999/xhtml">

03
<head>

04
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

05
<title>Untitled Document</title>

06
<style type="text/css">

07
body{background-color:#52c520;}

08

09
.aramaMetinKutusu{

10
 background:url(images/arama_zemini.gif)  0 0 no-repeat;

11
 width:202px;

12
 height:29px;

13
}

14

15
.aramaMetinKutusuOdak{

16
 background:url(images/arama_zemini.gif)  0 -31px no-repeat;

17
 width:202px;

18
 height:29px;

19
}

20

21
.aramaMetinKutusu input{

22
 width:190px;

23
 margin:5px  0 0 4px;

24
 border:none;

25
}

26

27
.aramaMetinKutusuOdak input:focus{

28
 width:190px;

29
 margin:5px  0 0 4px;

30
 border:none;

31
 background-color:#F6FFD4

32
}

33

34
</style>

35
</head>

36

37
<body>

38
<div class="aramaMetinKutusu">

39
 <input type="text" name="arama" onfocus="this.parentNode.className='aramaMetinKutusuOdak'" onblur="this.parentNode.className='aramaMetinKutusu'" />

40
</div>

41
</body>

42
</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.

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

1 input{

`2`	`outline:0`

3 }

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

Kaynak : CSS Dersleri, Fatih HAYRİOĞLU