HTML’de varsayılan olarak çıkan mavi renkte olan seçim rengini css3 ile beraber gelen selection adlı seçici sayesinde kolayca değiştirebilmekteyiz. makalenin devamında seçim renginin nasıl değiştirilebildiğini görebilirsiniz.
İçerik
göster
HTML ile seçim rengini değiştirme
Şimdi selection seçicisinin örnek syntax’ini görelim
1 2 3 4 5 6 | ::selection { background: #ffb7b7; } ::-moz-selection { background: #ffb7b7; } |
Şimdi selection seçicisi ile ilgili örneğe ait kodlara gözatalım ve sonucu görelim.
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | <!DOCTYPE html> <html lang="tr"> <head> <meta charset="utf-8"> <style> p { font-size: 1.5em; margin-bottom: 2.2em; } p.red::selection { background: #ffb7b7; } p.red::-moz-selection { background: #ffb7b7; } p.blue::selection { background: #a8d1ff; } p.blue::-moz-selection { background: #a8d1ff; } p.yellow::selection { background: #fff2a8; } p.yellow::-moz-selection { background: #fff2a8; } </style> </head> <body> <h1>Seçim rengi değiştirme</h1> <h2>Seçim rengi <span class="re">KIRMIZI</span></h2> <p class="red">Pellentesque vel dui sed orci faucibus iaculis. Suspendisse dictum magna id purus tincidunt rutrum. Nulla congue. Vivamus sit amet lorem posuere dui vulputate ornare. Phasellus mattis sollicitudin ligula. Duis dignissim felis et urna. Integer adipiscing congue metus. Nam pede. Etiam non wisi. Sed accumsan dolor ac augue. Pellentesque eget lectus. Aliquam nec dolor nec tellus ornare venenatis. Nullam blandit placerat sem. Curabitur quis ipsum. Mauris nisl tellus, aliquet eu, suscipit eu, ullamcorper quis, magna. Mauris elementum, pede at sodales vestibulum, nulla tortor congue massa, quis pellentesque odio dui id est. Cras faucibus augue.</p><p> </p><h2>Seçim rengi <span class="bl">MAVİ</span></h2> <p class="blue">Pellentesque vel dui sed orci faucibus iaculis. Suspendisse dictum magna id purus tincidunt rutrum. Nulla congue. Vivamus sit amet lorem posuere dui vulputate ornare. Phasellus mattis sollicitudin ligula. Duis dignissim felis et urna. Integer adipiscing congue metus. Nam pede. Etiam non wisi. Sed accumsan dolor ac augue. Pellentesque eget lectus. Aliquam nec dolor nec tellus ornare venenatis. Nullam blandit placerat sem. Curabitur quis ipsum. Mauris nisl tellus, aliquet eu, suscipit eu, ullamcorper quis, magna. Mauris elementum, pede at sodales vestibulum, nulla tortor congue massa, quis pellentesque odio dui id est. Cras faucibus augue.</p><p> </p><h2>Seçim rengi <span class="ye">SARI</span></h2> <p class="yellow">Pellentesque vel dui sed orci faucibus iaculis. Suspendisse dictum magna id purus tincidunt rutrum. Nulla congue. Vivamus sit amet lorem posuere dui vulputate ornare. Phasellus mattis sollicitudin ligula. Duis dignissim felis et urna. Integer adipiscing congue metus. Nam pede. Etiam non wisi. Sed accumsan dolor ac augue. Pellentesque eget lectus. Aliquam nec dolor nec tellus ornare venenatis. Nullam blandit placerat sem. Curabitur quis ipsum. Mauris nisl tellus, aliquet eu, suscipit eu, ullamcorper quis, magna. Mauris elementum, pede at sodales vestibulum, nulla tortor congue massa, quis pellentesque odio dui id est. Cras faucibus augue.</p><p> </p></div> </body> </html> |
