Как поменять цвет выделения текста css
Перейти к содержимому

Как поменять цвет выделения текста css

  • автор:

Цвет выделения текста в CSS

Цвет выделения текста в CSS

Те, кто сидит в интернете почаще некоторых, видели, что на некоторых сайтах текст выделяется другим цветом. Я-то думал, что во всех браузерах текст просто обращается в негатив, оказывается не всегда. Если подумать, то будет гораздо интереснее делать яркое выделение. Например, розовое выделение текста, светло-зеленое выделение. Ну это в зависимости от оформления сайта. Цвет выделения текста в CSS можно поменять по определенным параметрам. Использовать нужно три варианта, чтобы эффект поддержало большинство браузеров.

Выдели текст и узнаешь, кто ты:

Ты л юбящий, о тветственный, да и просто х ороший человек.

Как изменить цвет выделения текста в WordPress

Знаете, что делает дизайн сайта выделяющимся среди всех остальных и запоминающимся? Внимание к деталям. Одной из этих деталей, привлекающих внимание пользователей, является цвет выделения текста, соответствующий общей цветовой схеме сайта, нежели обыкновенный стандартный — голубой. В этой статье мы покажем вам как изменить цвет выделения текста в WordPress.

selectiontext[1]

Откройте ваш файл style.css и добавьте следующие стили:

::-moz-selection < background-color: #ff6200; color: #fff; >::selection

Не забудьте изменить цвет фона для соответствия вашей цветовой схеме шаблона.

Селектор ::selection понимают Googke Chrome, Safari, IE9+, and Opera. Firefox любит использовать свой собственный ::-moz-selection (хотя, возможно, новые версии браузера уже не болеют этим �� ).

Изменение цвета выделения текста в браузере

В сегодняшнем руководстве мы научим вас, как изменять стандартный цвет выделения текста в браузере при помощи CSS.

Изменение цвета выделения текста в браузере

Всем известно, что если на странице зажать левую кнопку мыши и начать перемещать мышь, будет создаваться выделение текста. Различные браузеры выделяют этот текст по-разному. Например, в моем браузере текст становится белым, а фон за ним становится серовато-синим.

Используя селектор ::selection, можно изменить стиль выделения текста. Это можно применять в различных ситуациях. Например, таким образом можно в значительной степени приукрасить свой веб-сайт, либо защитить текст страниц от копирования (ведь можно сделать так, чтобы люди не могли видеть тот текст, который они выделяют).

Воспользуйтесь следующим кодом:

/* webkit, opera, IE9 */
.blue::selection background:blue;
>
/* mozilla firefox */
.blue::-moz-selection background:blue;
>

/* webkit, opera, IE9 */
.red::selection background:red;
>
/* mozilla firefox */
.red::-moz-selection background:red;
>

/* webkit, opera, IE9 */
.hide::selection background:white;color:white;
>
/* mozilla firefox */
.hide::-moz-selection background:white;color:white;
>

Не забудьте также посмотреть демо — выделите любой участок текста на странице .

Постовой: Наш генератор позволит вам создать loading gif в качестве прелоудера для загрузки изображений и других элементов сайта.

Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.

Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь

Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Как сделать — Изменить цвет выделения текста

Узнать, как переопределить цвет выделения текста по умолчанию с помощью CSS.

Цвет выделения текста

Выделить следующий текст:

Цвет выделения текста по умолчанию

Пользовательский цвет выделения текста

Изменить цвет выделения текста

Используйте селектор ::selection для переопределения цвета выделения текста по умолчанию:

Пример

::selection color: red;
background: yellow;
>

Совет: Подробнее о селекторе ::selection читайте в нашем CSS справочнике: CSS Свойство ::selection.

Мы только что запустили
SchoolsW3 видео

ВЫБОР ЦВЕТА

colorpicker

курс сегодня!

Сообщить об ошибке

Если вы хотите сообщить об ошибке или внести предложение, не стесняйтесь отправлять на электронное письмо:

Ваше предложение:

Спасибо Вам за то, что помогаете!

Ваше сообщение было отправлено в SchoolsW3.

ТОП Учебники
ТОП Справочники
ТОП Примеры
Получить сертификат

SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.

Добавить комментарий

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