CSS İpucu 21: CSS ile Seçilen Metinlerin Rengini Değiştirmek

css-tricks.com sitesine her girdiğimde metinleri seçince çok hoş bir görüntü ile karşılaşıyorum. Bence çok güzel. Belkide standart renklerden bıktığım için farklı renkler bana hoş geliyor. Metinleri seçince ardalan rengini ve metin rengini değiştirebilmek çok güzel bence. Özelliğin tek kötü yanı Internet Explorer?un(8. sürüm dahil) desteğinin söz konusu olmaması.

Kodlama çok basit

1
::-moz-selection {

2
 background:#c00;

3
 color:#fff;

4
}

5
::selection {

6
 background:#c00;

7
 color:#fff;

8
}

Kodlamanın birinci kısmı(::-moz-selection) mozilla tabanlı yani Firefox için ikinci kısmı ise normal CSS 3 ile birlikte gelen koddur. Webkit tabanlı tarayıcılar ve Opera 9.5 bu kodu destekliyor.

Ayrıca diğer seçicilerede bunu uygulayabiliyoruz. Bağlantılar için farklı bir renk tanımlayalım mesela

1
a::-moz-selection {

2
 background:#1259C7;

3
 color:#fff;

4
}

5

6
a::selection {

7
 background:#1259C7;

8
 color:#fff;

9
}

Örnek olarak bu sitede herhangi bir metni seçince göreceksiniz.

Internet Explore desteklemiyor. Bunun haricinde Firefox 2, Safari, Opera 9.5 ve Google Chrome destekliyor.

Kaynaklar

Kaynak : CSS Dersleri, Fatih HAYRİOĞLU