У бывалых верстальщиков и веб-мастеров наверняка возникала ситуация, когда текст на их сайте выделялся мышью не так, как этого бы хотелось. Например, вместо синего выделения получалось серое, а если еще и на светлом фоне — то вообще караул. Более того, разные браузеры имеют свой стиль выделения текста. Если вы посмотрели в Chrome и все нормально выделилось, то это совсем не означает, что точно также выделение мышью срабатывает в Firefox.
Есть очень простое решение проблемы, это использовать псевдокласс selection в CSS. Для каждого движка браузера – своя нотация, поэтому, для верности, включайте для всех. В общем-то, в недалеком будущем, все браузеры будут понимать ::selection, но сейчас лучше все-таки писать как ниже.
В примере ниже, background — это фон текста, color — цвет самого текста
Так псевдокласс ::selection прописывается в CSS:
div::selection {
background: blue;
color: white;
}
div::-webkit-selection {
background: blue;
color: white;
}
div::-moz-selection {
background: blue;
color: white;
}
Данный пример заставит текст в блоках div выделяться синим фоном и белыми буквами, как все и привыкли. Но вы можете выставить любые цвета, например, желтый на розовом.