—»     —»   Изменение цвета выделения текста в браузере
  Раздел: Подсказки   Комментариев: 5  

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



В сегодняшнем руководстве мы научим вас, как изменять стандартный цвет выделения текста в браузере при помощи 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
Опубликовал Design FactoRy   Прочитано (раз): 17405   |   Оставлено комментариев: 5
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 13 января 2012 @ 11:04
Написал: Андрей — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
А где само демо?
Комментарий #2: 13 января 2012 @ 11:37
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3300   |   Комментариев: 500
ICQ: --- не указано ---
Андрей, выделите любой участок текста на странице и увидите демо smile
Комментарий #3: 13 января 2012 @ 11:48
Написал: Андрей — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
.hide::selection не защищает от копирования (всего лишь скрывает текст за белой пленой :) ).

А запретить копирование можно следующим кодом:

/* Это свойство для Firefox */

-moz-user-select: none;

/* Это свойство для Chrome, Safari */

-khtml-user-select: none;

/* Это общее свойство css3 */

user-select: none;

Как минус этого способа, что это действует пока только на браузеры Firefox, Safari, Chrome.

Взято отсюда http://icq-num.ru/forum/css/10965-Запрещаем-копирование-текста-с-помощью-css3.ht
ml


Design FactoRy,
Да вижу smile
Комментарий #4: 13 января 2012 @ 12:18
Написал: Mysterious Master — группа: Администраторы  
На сайте с: 11.07.2009   |   Публикаций: 1491   |   Комментариев: 177
ICQ: --- не указано ---
Цитата: Андрей
.hide::selection не защищает от копирования (всего лишь скрывает текст за белой пленой :) ).
, совершенно верно.

За код, следующий далее, спасибо.
Комментарий #5: 13 января 2012 @ 12:36
Написал: Андрей — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Mysterious Master,
совершенно верно.

За код, следующий далее, спасибо.


Пожалуйста!

Вот еще кое-что нашел: http://webmastak.com/article.aspx?id=25
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц February по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Ноябрь 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
27282930