CSS ile Seçilen Yazıların Arka Plan Rengini Değiştirin

Genellikle yazıları okurken nerde kaldığımı işaretlemek için veya daha rahat okuyabilmek için yazıyı seçerek okurum. Bu şekilde çok daha rahat yazıyı takip edebiliyorum. Yazıları seçerken normalde seçim renkleri tarayıcının standart renklerdir. Ancak bu renkleri isterseniz CSS’ye ekleyeceğiniz bir kaç satır kod ile değiştirebilirsiniz. Bu şekilde hem web sitenizde renklerde uyumluluk sağlamış olursunuz hemde ziyaretçilerinizin daha renkli bir seçim yapabilmelerini sağlarsınız. Peki nasıl yaparız bunu hemen anlatayım.

Kodlama iki kısımdan oluşuyor. Birinci kısımda firefox için seçimi tanımlıyoruz, ikinci kısımda ise CSS3 ile birlikte gelen normal kodlamayı yazıyoruz.

::-moz-selection {
background: #336699;
color: #FFFFFF;
}
::selection {
background: #336699;
color: #FFF;
}

a::-moz-selection {
background: #333;
color: #FFFFFF;
}
a::selection {
background: #333;
color: #FFFFFF;
}

İşte bu kadar basit. İlk kodda bütün metinlerin seçim arkaplan renklerini ve yazı renklerini belirledik. İkincisinde ise sadece linklere yani a etiketine sahip kodlara uyguladık.

Özelliğin tek kötü yanı IE8 dahil Internet Explorer tarafından desteklenmemesi. Bunun dışında Firefox, Chrome, Safari ve Opera özelliği destekliyor.

KAYNAK