‘textbox’ etiketi için sonuçlar
Safari ve Chrome’da metin girdi(textbox) alanlarını kenar çizgileri kaldıralım
Temmuz 24th, 2009 • 5 yorum CSS, XHTML
Etiketler: dış-hat-çizgisi, Google Chrome, outline, özel-metin-girdi-alanları, safari, textbox
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.
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://gandamanurung.com/css/how-to-get-rid-textinput-blue-border-in-safari/ (google chrome safari de mavi kenarları yok etmek)
- http://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/
29 Temmuz 2008 web’den seçme haberler
Temmuz 29th, 2008 • 7 yorum Haberler
Etiketler: açılır-menü, CSS, css hataları, css ile site yapmak, CSS sıfırlama, çek bırak, dikey kayan haber scripti, Firefox, hızlı döngü, internette gezmek, Javascript, jquery, klavye kısayolları, outline, resim galerisi, textbox
- 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ı
