Как изменить цвет и фон выделения на сайте в html5

Выделение текста на странице средствами css3Изменить цвет и фон выделения текста со стандартного синего (а еще хуже оранжевого, в убунте например, :) ) можно довольно просто с помощью псевдоселектора ::selection (поддерживается IE9+, Opera, Chrome и Safari).

Стоит добавить, что только несколько css свойств могут быть применены к ::selection,

это color, background, cursor и outline.

Давайте попробуем! Нам понадобится всего несколько строк css:

HTML

<h3 class="default_selection">
  Текст с дефолтным(системным) цветом и фоном выделения
</h3>
<h3 class="custom_selection">
  Текст с заданными нами цветом и фоном выделения
</h3>

CSS

h3.custom_selection::-moz-selection {
  background: rgba(255,251,102, 0.8);
  color: rgb(19,188,188);
}

h3.custom_selection::-webkit-selection {
  background: rgba(255,251,102, 0.8);
  color: rgb(19,188,188);
}

h3.custom_selection::selection {
  background: rgba(255,251,102, 0.8);
  color: rgb(19,188,188);
}

Теперь можно попробовать, что из этого получисось:

Изменяем стиль выделения с помощью css

A так можно измениить цвет выделения всего контента страницы?

Для этого используем body <em> (хотя </em> – худший по скорости вариант, для отрисовки в браузере.

Если есть предложения, по-лучше?

…пишите в комментах! ;))

CSS

body *::-moz-selection {
  background: rgba(255,251,102, 0.8);
  color: rgb(19,188,188);
}

body *::-webkit-selection {
  background: rgba(255,251,102, 0.8);
  color: rgb(19,188,188);
}

body *::selection {
  background: rgba(255,251,102, 0.8);
  color: rgb(19,188,188);
}

5 комментариев на “Как изменить цвет и фон выделения на сайте в html5
  1. Name пишет:

    Привет, для всего текста на сайте работает так:

    ::-moz-selection{...} 
    ::webkit-selection{...} 
    ::selection{...}
    

    без селекторов тегов и главное без звездочек))))

  2. AlexEx пишет:

    Почему бы тогда не сделать вот так:

    ::-moz-selection, 
    ::webkit-selection, 
    ::selection{…}
    
  3. Maxmaxmaximus пишет:

    К слову, в chrome 2014 год не работают стили для текста в input

  4. Максим пишет:

    А как сделать цвет фона градиентом?)

Оставить комментарий

Ваш email не будет опубликован. Обязательные поля отмечены *

*

* Copy This Password *

* Type Or Paste Password Here *

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Узнавай о новых статьях первым!

Спасибо за лайк в FACEBOOK
Подписывайтесь на новости вконтакте
Последние статьи от html5.by