Css как изменить цвет текста при выделении - Исправление ошибок и поиск оптимальных решений проблем

Как изменить цвет шрифта при выделении текста
Как изменить фоновый цвет при выделении текста
Как изменить цвет тени при выборе текста
Как изменить цвет полей Textarea и Input при выборе текста
Как изменить цвет выбранного изображения
Как создать разные эффекты выделения для одного и того же элемента на одной странице
Как применить эффекты выделения для всей страницы

Каждый раз, когда пользователь выбирает текст для выделения, автоматически применяется какой-нибудь фоновый цвет, а иногда может меняться цвет текста. Если вы раньше не заметили этого, просто выделите это предложение, чтобы увидеть фоновый цвет текста.

Если вам не нравится синий цвет, или по какой-либо другой причине (например, это может быть связано с дизайном вашей веб-страницы) вы хотите изменить цвет выделения, CSS3 дает эту возможность!

Псевдоэлемент ::selection является известной функцией CSS3, который переопределяет цвет выделенного текста на уровне браузера или системы. Он также дает возможность указать цвет и фон для выбранного пользователем текста.

Можно изменить цвет/фоновый цвет определенных элементов или всей веб-страницы.

Количество свойств, используемых с этим псевдоэлементом, ограничено. С помощью псевдоэлемента ::selection можно изменить значения только трех свойств (color, background-color и text-shadow). В этой статье мы покажем, каким будет эффект для каждого из этих свойств.

Для максимальной совместимости браузера используйте расширение -moz- для поддержки в Firefox (::-moz-selection).

Чтобы изменить цвет элемента, необходимо добавить стиль к элементу с помощью псевдоэлемента ::selection. Можно изменить только цвет шрифта, а также цвет шрифта вместе с фоном.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .green::-moz-selection{
      color: #8ebf42;
      }
      .green::selection{
      color: #8ebf42;
      background-color: initial;
      }
      .bg-green::-moz-selection{
      background-color: #8ebf42;
      }
      .bg-green::selection{
      background-color: #8ebf42;
      }
      .bg-transparent::-moz-selection{
      color: #8ebf42;
      background-color: transparent;
      }
      .bg-transparent::selection{
      color: #8ebf42;
      background-color: transparent;
      }
      .white-green::-moz-selection{
      color: #fff;
      background-color: #8ebf42;
      }
      .white-green::selection{
      color: #fff;
      background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <p class="green">Выберите этот текст и увидите зеленый цвет шрифта и фон по умолчанию.</p>
    <p class="bg-green">Выберите этот текст и увидите цвет шрифта по умолчанию и зеленый фон.</p>
    <p class="bg-transparent">Выберите этот текст и увидите зеленый цвет шрифта без фонового цвета.</p>
    <p class="white-green">Выберите этот текст и увидите белый цвет шрифта и зеленый фоновый цвет.</p>
  </body>
</html>

В этом примере фоновый цвет по умолчанию — это цвет данного сайта.

Здесь нужно применить то же самое, только для фонового цвета. Просто добавьте стиль к элементу с помощью ::selection и установите выбранный вами цвет для свойства background-color.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .green::-moz-selection{
      background-color: #8ebf42;
      }
      .green::selection{
      background-color: #8ebf42;
      }
      .yellow::-moz-selection{
      background-color: #ffcc00;
      }
      .yellow::selection{
      background-color: #ffcc00;
      }
    </style>
  </head>
  <body>
    <p>Текст с фоновым цветом по умолчанию.</p>
    <p class="green">Выберите этот текст и увидите зеленый фон.</p>
    <p class="yellow">Выберите этот текст и увидите желтый фон.</p>
  </body>
</html>

В случае, если не хотите фоновый цвет при выделении текста, установите свойство background-color со значением «transparent».

Используйте дальше псевдоэлемент ::selection для добавления, удаления или изменения вида текстовой тени при выделении.

Вам необходимо только установить свойство text-shadow для псевдоэлемента ::selection.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      /* before selection */
      .shadow2{
      text-shadow: 1px 1px 1px;
      }
      .shadow3{
      text-shadow: 1px 2px 4px #000;
      }
      .shadow4{
      text-shadow: 1px 2px 4px;
      }
      /* after selection */
      .shadow1::-moz-selection{
      text-shadow: 1px 1px 1px;
      background-color: transparent;
      }
      .shadow1::selection{
      text-shadow: 1px 1px 1px;
      background-color: transparent;
      }
      #shadow2::-moz-selection{
      text-shadow: none;
      background: #fffae6;
      }
      .shadow2::selection{
      text-shadow: none;
      background: #fffae6;
      }
      .shadow3::-moz-selection{
      text-shadow: 1px 1px 2px #222;
      }
      .shadow3::selection{
      text-shadow: 1px 1px 2px #222;
      }
      .shadow4::-moz-selection{
      text-shadow: 1px 2px 4px #208A28;
      background-color: transparent;
      color: #208A28;
      }
      .shadow4::selection{
      text-shadow: 1px 2px 4px #208A28;
      background-color: transparent;
      color: #208A28;
      }
    </style>
  </head>
  <body>
    <p class="shadow1">Выделите текст и увидите его тень.</p>
    <p class="shadow2">Выделите текст, чтобы удалить его тень.</p>
    <p class="shadow3">Выделите текст, чтобы он стал яснее.</p>
    <p class="shadow4">Выделите текст, чтобы изменить цвет его тени.</p>
  </body>
</html>

Как изменить цвет полей Textarea и Input при выборе текста

Также возможно изменить цвет при выделении текста для полей <textarea> и <input>. Давайте рассмотрим пример с псевдоэлементом ::selection с элементами textarea и input:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      input::-moz-selection{
      color: #1c87c9;
      background-color: #eee;
      }
      input::selection{
      color: #1c87c9;
      background-color: #eee;
      }
      textarea::-moz-selection{
      color: white;
      background-color: #8ebf42;
      }
      textarea::selection{
      color: white;
      background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <p>Элемент input</p>
    <form><input type="text" value="Выделите этот input текст" /></form>
    <p>Элемент textarea</p>
    <textarea rows="5" cols="25">Выделите этот textarea текст</textarea>
  </body>
</html>

Вы можете изменить цвет выделенного изображения с помощью псевдоэлемента ::selection. Смотрите пример сами:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      img {
      padding: 10px;
      }
      #img2::-moz-selection{
      background-color: #d9d9d9;
      }
      #img2::selection{
      background-color: #d9d9d9;
      }
    </style>
  </head>
  <body>
    <p>Здесь второе изображение при выделении становится серым.</p>
    <p>Выделите обе изображения, чтобы увидеть разницу.</p>
    <img id="img1" src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq">
    <img id="img2" src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq">
  </body>
</html>

Как создать разные эффекты выделения для одного и того же изображения на одной странице

Представьте, что у вас есть 4 параграфа, и вы хотите применить разные цвета для каждого из них по отдельности.

В таком случае необходимо изменить цвет выделения для разных параграфов или разных разделов страницы.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      p.green::selection {
      background: #8ebf42;
      }
      p.green::-moz-selection {
      background: #8ebf42;
      }
      p.blue::selection {
      background: #1c87c9;
      }
      p.blue::-moz-selection {
      background: #1c87c9;
      }
      p.yellow::selection {
      background: #ffcc00;
      }
      p.yellow::-moz-selection {
      background: #ffcc00;
      }
      p.red::selection {
      background: #ff6666;
      }
      p.red::-moz-selection {
      background: #ff6666;
      }
    </style>
  </head>
  <body>
    <p class="green">Выберите текст, и он выделится зеленым цветом.</p>
    <p class="blue">Выберите текст, и он выделится синим цветом.</p>
    <p class="yellow">Выберите текст, и он выделится желтым цветом.</p>
    <p class="red">Выберите текст, и он выделится красным цветом.</p>
  </body>
</html>

Селекторы не могут быть объединены ни в коем случае. Если вы объедините несколько селекторов, они не будут работать, так как браузеры игнорируют все селекторы, когда какая-нибудь часть непонятна или недействительна.

Применение эффектов выделения к определенным элементам может быть напрасной потерей времени, если просто необходимо иметь одинаковый эффект для всей страницы вашего сайта. Использование псевдоэлемента ::selection дает возможность задать цвет выделения для всей страницы без его применения к определенным элементам.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      ::-moz-selection{
      color: #fff;
      background-color: #8ebf42;
      }
      ::selection{
      color: #fff;
      background-color: #8ebf42;
    </style>
  </head>
  <body>
    <h3>Выберите несколько элементов на странице и увидите белый цвет выделения, а фоновый цвет установлен в зеленый для всей страницы.</h3>
    <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.. I</p>
    <img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq">
  </body>
</html>

::selection поддерживается многими браузерами. Проблема совместимости с Firefox решается при помощи добавления префикса -moz- перед селектором. В случае планшетов и мобильных устройств данный селектор не поддерживается в iOS Safari и Opera Mini.

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

Добавление стиля с помощью этого псевдоэлемента в соответствии с цветами вашего сайта (вместо использования скучного синего фонового цвета при выделении текста) может сделать вашу веб-страницу интересным. Для определенной части вашей страницы можете выбрать фоновый цвет выделения или применить разные цвета для разных частей.

Источник

Improve Article

Save Article

Read

Discuss

Improve Article

Save Article

The colour of selected text can be easily changed by using the CSS | ::selection Selector. In the below code, we have used CSS ::selection on <h1> and <p> element and set its colour as yellow with green background.

Below example implements the above approach:

Example:

<!DOCTYPE html>

<html lang="en">

<head>

<title>

How to change the color of

selected text using CSS?

</title>

<style>

.geeks h1 {

color: green;

}

h1::selection {

background: green;

color: yellow;

}

p::selection {

background: green;

color: yellow;

}

</style>

</head>

<body>

<div class="geeks">

<h1>GeeksforGeeks</h1>

<p>

A Computer Science portal for

geeks. It contains well written,

well thought and well explained

computer science and programming

articles, quizzes and many more.

</p>

</div>

</body>

</html>

Output:

Источник

Improve Article

Save Article

Read

Discuss

Improve Article

Save Article

Below example implements the above approach:

Example:

<!DOCTYPE html>

<html lang="en">

<head>

<title>

How to change the color of

selected text using CSS?

</title>

<style>

.geeks h1 {

color: green;

}

h1::selection {

background: green;

color: yellow;

}

p::selection {

background: green;

color: yellow;

}

</style>

</head>

<body>

<div class="geeks">

<h1>GeeksforGeeks</h1>

<p>

A Computer Science portal for

geeks. It contains well written,

well thought and well explained

computer science and programming

articles, quizzes and many more.

</p>

</div>

</body>

</html>

Output:

Источник

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

Чтобы указать цвет и фон выделенного текста применяется псевдоэлемент ::selection, в котором задаются свойства color и background, как покаано в примере 1.

Пример 1. Цвет выделенного текста

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Выделение</title>
<style>
::selection {
background: #809778; /* Цвет фона */
color: #fff; /* Цвет текста */
}
</style>
</head>
<body>
<p>В условиях электромагнитных помех, неизбежных при
полевых измерениях, не всегда можно опредлить,
когда именно волна ненаблюдаемо стабилизирует кварк</p>
</body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Цвет и фон выделенного текста

См. также

Источник

Как изменить цвет выделения текста на сайте только с помощью CSS
- Цвет выделения для всего текста на сайте
- Цвет выделения для отдельного текста на сайте
Задаем уникальный цвет выделения текста с использованием CSS
- Поддержка браузерами
- Пример использования
- Код CSS
- Подбор цветов
Выделение текста жирным, курсивом и цветом.
- - Выделение текста жирным начертанием.
  - Выделение текста курсивом.
- HTML выделение цветом.
Меняем цвет фона выделенного текста с помощью CSS / Dimox.name
- - Примеры
Интересный эффект выделения текста с использованием псевдоэлемента CSS выделения
Html выделить текст цветом (фон), рамкой
- Как сделать рамку в html вокруг текста
  - Толщина и размер рамки
    - Вид рамки
    - Html рамка по длине текста
    - Как выбрать цвет рамки и фона
Изменяем цвет при выделении текста на сайте c помощью CSS3
- - - Шаг 1. HTML
    - Шаг 2. CSS
    - Выделения всего текста на сайте:
    - Выделения отдельного текста на сайте
    - Вот и все. Готово!
  - Читайте также:

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

Естественно это не очень Важный момент в дизайне Вашего сайта. Но если Вы измените цвет выделения это ещё больше подчеркнёт уникальность Вашего дизайна. Тем более если стандартный синий цвет выделения текста ну никак не хочет сочетаться с другими цветами Вашего шаблона.

За урок огромное спасибо сайту css-tricks.com.

В общем, друзья, давайте начинать.

Друзья, делается это очень просто, нужно только прописать несколько не сложных строк в стилях CSS. Здесь мы рассмотрим как сделать один цвет выделения для всего текста на сайте, а так же сделаем отдельные цвета для того текста который мы захотим, другими словами для каждого текста отдельный цвет.

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

По умолчанию давайте выберем серый цвет #ccc. И для того чтобы цвет выделения изменился, нужно добавить вот эти строки в стили:

::selection {background: #ccc;}
::-moz-selection {background: #ccc;}
::-webkit-selection {background: #ccc; color:#fff;}

Всё. Теперь на нашем сайте цвет выделения стал серым. Но и это ещё не всё.

Цвет текста

Например мне захотелось чтобы именно сами буквы меняли цвет. Для этого просто нужно задать свойство color: с желаемым цветом. Таким образом вот как будет выглядеть код:

::selection {background: #ccc; color:#fff;}
::-moz-selection {background: #ccc; color:#fff;}
::-webkit-selection {background: #ccc; color:#fff;}

Вот теперь при выделении цвет буквы будет белого цвета.

Цвет выделения для отдельного текста на сайте

Например нам хочется, чтобы сверху текст выделялся зелёным, посередине красным, а снизу голубым. Для этого просто нужно к тегу <p> присвоить соответствующий класс, например для красного выделения класс будет red и так далее.

Таким образом вот как будет выглядеть код CSS:

p.red::selection {background: #FFB7B7;}
p.red::-moz-selection {background: #FFB7B7;}
p.red::-webkit-selection {background: #FFB7B7;}

p.blue::selection {background: #67cfff;}
p.blue::-moz-selection {background: #67cfff;}
p.blue::-webkit-selection {background: #67cfff;}

p.green::selection {background: #78e780;}
p.green::-moz-selection {background: #78e780;}
p.green::-webkit-selection {background: #78e780;}

Как видите, что для каждого цвета мы задали свой класс. Теперь давайте посмотрим как это будет выглядеть в HTML:

<p>Пример зелёного цвета при выделении текста</p>

<p>Пример красного цвета при выделении текста</p>

<p>Пример голубого цвета при выделении текста</p>

Как видите, здесь нет ничего сложного. Просто к каждому тегу <p> мы присвоили класс с соответствующим цветом.

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

beloweb.ru

Задаем уникальный цвет выделения текста с использованием CSS

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

Поддержка браузерами

Этот способ работает в браузерах Firefox, Chrome, Safari и Internet Explorer, начиная от 9-ой версии, но не работает в современных версиях браузеров Chrome и Safari для iOS, Opera Mini и UC Browser для Android. Воспринимайте этот эффект как декоративное дополнение. Те пользователи, которые смогут его увидеть, восхитятся безупречным стилем Вашего сайта, а те, кто не сможет — не почувствуют себя обделенными.

Пример использования

Вот скриншот того, как может выглядеть уникальный цвет выделения для пользователей браузеров, поддерживающих этот псевдоэлемент:

Можете сами опробовать, как это работает, открыв страницу с исходником этого урока в подходящем браузере и выделив любой текст в уроке. Выделенный текст будет белым на малиновом фоне.

Демонстрация работы

Код CSS

Чтобы создать уникальный цвет выделения текста, нужно добавить следующий код в таблицу стилей:

::-moz-selection {
background-color: #BA9EB0;
color: #ffffff;
}
::selection {
background-color: #BA9EB0;
color: #ffffff;
}

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

Свойство цвета фона задает цвет фона выделенного текста, а цвет — цвет шрифта.

Не забывайте поменять цвета для обоих псевдоэлементов. Псевдоэлемент -moz-selection работает в браузере Firefox, а псевдоэлемент selection (выделение) — во всех остальных поддерживающих это свойство браузерах.

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

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

Подбор цветов

Для подбора цветов можно использовать, например, сайт Colorpicker.com или добавление к браузеру Colorzilla. Ну и, конечно, можно выбрать цвета в редактирующих изображения программах, например, в Photoshop. Во всех этих источниках будут указаны цвета в шестнадцатеричной записи, и Вы можете просто скопировать их и вставить в код выше.

Автор урока Marie Mosley

Смотрите также:

www.dejurka.ru

Выделение текста жирным, курсивом и цветом.

Приветствую, Друзья.

После очередного долгого перерыва вспомнил, что давно уже не писал ни строчки. Конечно, на это есть свои причины, ведь какая-нибудь причина придумать себе оправдание всегда найдется, правда? На самом деле, каждый день занимаюсь ВидеоКурсом, о котором уже упоминал пару раз, но пока больше об этом ничего говорить не буду, скоро все узнаете.

Так вот, так как в голову ничего не приходило, о чем можно написать. Решил посмотреть статистику, что же интересует пользователей Рунета по вопросам HTML, WordPress, DLE и тому подобных тем. И знаете что? Есть еще о чем писать. На все вопросы, что я нашел, вроде бы и есть ответы, однако не всегда в понятной форме. Да и вообще стало интересно написать что-нибудь этакое.

Сегодня поговорим об HTML. А именно о том, как выделить текст жирным и курсивным начертанием, а также поговорим о выделении цветом.

Выделение текста жирным начертанием.

Чтобы выделить текст жирным начертанием не нужно ничего мудрить со стилями CSS или придумывать еще какие-либо сложности. В HTML уже есть такая возможность. При этом, мы можем не просто выделить текст жирным, но и сделать на нем некий акцент с помощью выделения. Акцент может делаться для поисковых систем или каких-либо специальных браузеров или программ. Главное это не переборщить с акцентированием текста в статье или на странице с как-то информацией, так как это может губительно сказаться как минимум на продвижении данной HTML-страницы.

Итак, чтобы просто выделить текст жирным, мы можем воспользоваться тегом <b>. Данный тег относится к элементам физической разметки, при этом устанавливая жирное начертание текста, не делая на нем какого-либо акцента. Этот тег является парным, что говорит о том, что он имеет, как открывающий тег, так и закрывающий. Кроме того, так как элемент встроенный, он должен находиться в каком-либо блочном элементе, например

<p>

Пример кода:

<p><b>жирный текст</b></p>

Результат:

жирный текст

В этом случае мы просто выделили текст жирным начертанием и все.

Но бывает, так что нам нужно не просто выделить текст, а сделать на нем акцент. Для этого мы можем использовать тег логической разметки <strong>. Мало того, что текст, выделенный, этим тегом имеет больший вес для поисковых систем. Но и по идее он должен отличаться от тега

<b> в речевых браузерах, например интонацией. Однако не могу ни подтвердить, ни опровергнуть данную информацию, так ли это?

В этом случае все абсолютно также как и в случае, с простым выделением жирным, только мы делаем акцент, а не просто выделение.

Пример кода:

<p><strong>текст, на котором мы сделали акцент</strong></p>

Результат:

текст, на котором мы сделали акцент

Все довольно просто, не правда ли?

Выделение текста курсивом.

В этом случае все не сложнее, чем в первом. И ситуация у нас абсолютно та же. Мы можем выделить текст двумя вариантами в HTML. Опять же, используя либо тег физической разметки или же тег логической, с помощью которого мы опять же делаем акцент на выделенный текст.

Чтобы выделить текст курсивом мы воспользуемся тегом <i>. Этот элемент является парным и строчным, что говорит нам о том, что мы должны использовать, как открывающий тег так и закрывающий. А также должны использовать его внутри блочного элемента. И в данном случае наиболее подходящий блочный элемент — тег параграфа <p>.

Пример кода:

<p><i>текст курсивом</i></p>

Результат:

текст курсивом

И конечно же мы можем сделать акцент на тексте одновременно выделив его курсивом с помощью тега <em>. Данный элемент такой же как <strong>, за исключением того что выделяется текст курсивом а не жирным.

Пример кода:

<p><em>текст, на котором мы сделали акцент</em></p>

Результат:

текст, на котором мы сделали акцент

И последнее о чем я хотел бы сегодня поговорить — это выделение текста цветом.

HTML выделение цветом.

К сожалению тега, для выделения текста цветом в HTML мы не имеем. Но все же и в этом способе нет ничего сложного.

Итак, чтобы выделить определенную часть текста цветом, мы можем обернуть нужную часть текста тегом <span>, который является универсальным тегом, и используется внутри блочного элемента. В нашем случае блочным элементом является тег <p>. Но добавить <span> недостаточно. Также необходимо указать параметр style, что позволит добавить CSS свойства необходимому тексту, указать само свойство (color), которое поможет задать определенный цвет. И наконец, указать значение для свойства color. Но может возникнуть вопрос: «Что указывать-то?» Указать необходимо HTML-код того цвета в который мы хотим «покрасить» текст. HTML-коды цветов можно найти здесь.

Теперь чтобы было понятней рассмотрим пример.

Пример кода.

<p>текст, который нужно выделить <span>цветом</span></p>

В этом случае мы выделяем одно слово: цветом. Также хочу отметить, что тег <span> является парным, и мы должны его закрыть там, где свойство должно закончиться.

Результат:

текст, который нужно выделить цветом

Такими нехитрыми способами мы можем манипулировать текстом на нашей странице. Хочу также отметить, что все то, о чем мы только что говорили, работает и на WordPress и на DLE, ибо любой движок для вывода страниц использует HTML. Именно поэтому HTML можно назвать основой основ любого сайта, не важно, какая у Вас CMS.

Надеюсь, я все понятно объяснил.

Удачи, Друзья. Скоро… Будут интересные новости…

sdelaemblog.ru

Меняем цвет фона выделенного текста с помощью CSS / Dimox.name

Одна из интересных возможностей спецификации CSS3, которая может использоваться уже сегодня — это псевдоэлемент ::selection, позволяющий изменять цвет фона выделенного текста, заданный в вашей операционной системе, на любой другой цвет по вашему усмотрению.

На данный момент ::selection поддерживают следующие браузеры:

Safari;
Google Chrome;
FireFox;
Opera 9.5 (начиная с билда 9770).

Safari несколько по-другому отображает результат в сравнении с FireFox и Opera (последние два браузера обрабатывают этот псевдоэлемент идентично).

Вот так это выглядит в CSS:


::selection {
	background: #FFB7B7; /* Safari, Chrome, Opera */
}
::-moz-selection {
	background: #FFB7B7; /* FireFox */
}

С селектором ::selection будет работать только свойство background, поэтому его можно применять, например, чтобы сделать отличающийся фон выделения для нескольких разных абзацев на странице:


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;}

Примеры

Пример с разными фонами выделенных абзацев.
Селектор ::selection можно использовать и для того, чтобы спрятать секретный текст 🙂 …
… или даже картинку.
Пример прямо в этом посте. Повыделяйте текст этого поста в одном из браузеров, поддерживающих данный селектор.

Практичность применения данной штуки, конечно, под вопросом. Тем не менее она показывает, что разработчики вышеуказанных браузеров стремятся к полноценной поддержке стандартов, постепенно внедряя подобные этой функции.

VIA

P.S. Во время тестирования селектора на этом посте, заметил, что он не работает в Safari и FireFox, если его применить к тегу списка <ul>, а работает только тогда, когда класс прописан непосредственно к элементу списка <li>.

* * *

Большой выбор только качественно компьютерной и бытовой техники предлагает официально зарегистрированный интернет магазин Донецк «Домовой». На весь ассортимент продукции имеются сертификаты, и предоставляется гарантийное обслуживание в сервисных центрах.

dimox.name

Интересный эффект выделения текста с использованием псевдоэлемента CSS выделения

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

Псевдоэлемент выделения определяет, как выглядит выделенный элемент. Как и псевдоэлемент посещения, этот псевдоэлемент может влиять далеко не на все свойства, а только на такие как: цвет, фон или отдельно цвет фона и фоновое изображение и тень текста. Например, такая запись изменит цвет фона всех выбранных элементов на красный:

::selection { background: red; }

Обратите внимание, старым версиям браузера Firefox требовалась запись этого псевдоэлемента с приставкой производителя:

::moz-selection { background: red; }
::selection { background: red; }

И это объявление должно было быть записано отдельно от объявления без приставки производителя, а при объединении записей псевдоэлементы конфликтовали друг с другом и отменяли эффект. Хотя современным версиям браузера Firefox уже не требуется такая запись, ее все еще удобно использовать для обходных путей, как показано в примере ниже.

Псведоэлемент выделения может задавать стили только определенным элементам — в следующем примере меняется внешний вид при выделении только у элемента заголовка:

h2::selection { background: red; }

Псевдоэлемент выделения был удален из спецификации CSS из-за недостаточной проработанности и был добавлен назад в спецификации псевдоэлементов CSS4. Хотя все это время все браузеры, кроме Safari для IOS и Opera Mini, продолжали его поддерживать.

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

h2::moz-selection { background: black; color: white; }
h2::selection { background: black; color: white; }

Интересный вариант был предложен Viljami Salminen, Вы можете увидеть его ниже: цвет выделенного текста инвертируется, цвет фона выделения делается прозрачным и обводится внешний контур текста. Так как только браузеры на движке Webkit поддерживают свойство обведения текста, задаем сначала свойства для браузера Firefox:

h2::-moz-selection {
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000,
         -1px 1px 0 #000, 1px 1px 0 #000;
  background: transparent;
}

После этого задаем особое свойство для браузеров Chrome, Safari и Opera:

h2::selection {
   text-shadow: none;
    -webkit-text-stroke: 1px #000;
  background: transparent;
}

И вот полученный результат. Выделите текст ниже, чтобы увидеть особый эффект выделения:

К сожалению, псевдоэлемент выделения работает в современных версиях браузера Internet Explorer, начиная от 9 версии, но при этом в нем не поддерживается свойство обведение текста, поэтому там выделенный текст станет полностью невидимым. Для решения этой проблемы нужен обходной путь, или можно использовать только обведение с помощью тени для всех браузеров.

Псевдоэлемент выделения можно объединить с псевдоклассом неактивного состояния окна, чтобы задавать, как выделенное содержимое должно выглядеть, когда окно браузера теряет фокус:

::selection:window-inactive {
  background:rgba(0,0,0,0.3);
}

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

www.dejurka.ru

Html выделить текст цветом (фон), рамкой

Иногда нужно выделить фрагменты или какие-то блоки текста рамкой, цветом, сделать цветной фон.

Текст, оформленный в яркую закругленную рамку, привлекает внимание читателей.

Сделать такую рамку с цветным фоном просто.

Не надо даже залезать в стили CSS.

Как сделать рамку в html вокруг текста

В текстовом режиме вставьте в запись (пост) следующий html код (в режиме ТЕКСТ).

<div>ваш текст</div>

Все параметры можете изменить по своему вкусу.
В режиме ВИЗУАЛЬНО вы увидите текст в рамке.

Толщина и размер рамки

РАЗМЕР шрифта текста font-size: 12px

СТИЛЬ шрифта font-family: Arial

СТАТЬИ ПО ТЕМЕ:

Как сделать, изменить wordpress главную страницу

Отложенная, запланированная публикация WordPress

Похожие записи WordPress: с плагином, без плагина, с миниатюрами

ТОЛЩИНУ и ЦВЕТ рамки определяет свойство border: 2px solid #aa0000.

ЦВЕТ фона background: #F8E4DF

Вид рамки

Solid — сплошная линия. Обводка может быть:

dotted – точечная;
dashed – пунктирная;
double – двойная;
ridge – рельефная.

При таком написании рамка растянется на всю ширину блока <p> или <div>, который занимает.

Html рамка по длине текста

Чтобы сделать рамку по длине текста, надо задать ее ширину, например, width:100px.

<div>ваш текст</div>

Если текст длинный, и ширины рамки не хватает, слова в рамке встанут в несколько строчек. Высота рамки при этом автоматически увеличится.

Как выбрать цвет рамки и фона

Чтобы подобрать цвет рамки и цвет фона, наиболее подходящие к дизайну вашего сайта:

ОТКРОЙТЕ свой сайт.

НАВЕДИТЕ курсор на элемент, который надо изменить.

ПРАВАЯ кнопка мыши, ПРОСМОТР КОДА ЭЛЕМЕНТА (в Google Chrome), или ИССЛЕДОВАТЬ ЭЛЕМЕНТ (в Mozilla Firefox), или ПРОИНСПЕКТИРОВАТЬ ЭЛЕМЕНТ (в Opera). Далее во всех этих браузерах действия аналогичны.

Появляется окно в нижней части экрана. Просматриваемый элемент в нем подсвечен.

Нажмите на квадратик COLOR и выберите наиболее подходящий вам цвет. Скопируйте цифровое обозначение цвета и вставьте его в html код (цвет рамки или цвет фона).

Готово, вы получили выделение текста цветом (цветной фон) и цветной рамкой.

Понравилась статья? Пишите отзывы в комментариях!

moi-start.ru

Изменяем цвет при выделении текста на сайте c помощью CSS3

Несомненно каждый из вас хоть раз выделял текст на сайте, если вы заметили цвет выделения зачастую одинаковый, это используются стандартные параметры системных файлов. Зачастую пользователи не особо вдаются в такие нюансы и не замечают этого, но если вам, разработчику какого нибудь интересного проекта, необходимо изменить данный параметр для того, чтобы придать сайту маленькую изюминку или просто подчеркнуть дизайн сайта данным эффектом тогда данная статья будет интересна, ведь в ней мы рассмотрим как изменить стандартный цвет выделения текста на сайте.

Для получения такого эффекта не требуется особых усилий и знания верстки, все достаточно просто, вы можете сами в этом убедиться. И так, приступим.

Шаг 1. HTML

Для начала мы рассмотрим простую разметку, которая состоит из заданных нами классов. ( Нужна разметка только выделения отдельного текста на сайте.

<p>Пример для выделения текста.</p>

С разметкой закончили, теперь переходим к следующему шагу.

Шаг 2. CSS

Мы рассмотрим два примера, первый из которых выделяет весь текст на сайте, а второй только отдельный текст.

Выделения всего текста на сайте:

Чтобы цвет изменился необходимо только эти две строчки. По умолчанию будем использовать зеленый цвет

selection {background: #c1e124;}

-moz-selection {background: #c1e124;}

Если вы хотите чтобы только буквы меняли цвет, вам необходимо задать свойство color с необходимом цветом.

selection {background: #c1e124; color:#fff;}

-moz-selection {background: #c1e124; color:#fff;}

После этого буквы также будут изменять свой цвет.

Выделения отдельного текста на сайте

Если вы захотели что текст на сайте выделялся не одним цветом, а различными, то вам необходимо к тегу <p> присвоить соответствующий класс, например для красного выделения класс будет green.

p.red::selection {background: #ff0000;}

p.red::-moz-selection {background: #ff0000;}

p.blue::selection {background: #03d5fb; margin-bottom:30px;}

p.blue::-moz-selection {background: #03d5fb;}

p.green::selection {background: #c1e124;}

p.green::-moz-selection {background: #c1e124;}

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Выделение и CSS +31

Блог компании RUVDS.com, Разработка веб-сайтов, CSS

Рекомендация: подборка платных и бесплатных курсов создания сайтов — https://katalog-kursov.ru/

Навык выделения текста и других объектов сформировался у пользователей компьютеров много лет назад. Мы выделяем содержимое веб-страниц по разным причинам. Возможно, нужно скопировать текст и где-то его процитировать, возможно — кому-то просто легче читать текст, выделяя его фрагменты. На мобильных устройствах, правда, выделять что-либо сложнее. Меня, например, это раздражает. Мне не нравится выделять содержимое веб-страниц на телефоне. Эта операция кажется какой-то «неправильной».

В этом материале я расскажу обо всём, что нужно знать о стилизации выделений средствами CSS. В частности, речь пойдёт о псевдоэлементе ::selection и о свойстве user-select. Эта статья направлена на то, чтобы показать всем желающим возможности CSS по работе с выделениями, и на то, чтобы рассказать о том, когда и как использовать разные методы работы с выделениями.

Основы

На MDN можно узнать о том, что псевдоэлемент ::selection позволяет применить стили к части документа, который был выделен пользователем (например, с помощью мыши).

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

p::selection {
   color: #fff;
   background-color: #000; 
}

Выделенный текст

Вот пример, с которым можно поэкспериментировать.

Свойства, поддерживаемые ::selection

Стоить отметить, что псевдоэлемент ::selection поддерживает только свойства color, background и text-shadow.

Настройка собственных эффектов выделения

Что если нам нужно, чтобы выделение выглядело бы по-особенному? Например, чтобы выделение имело бы определённую высоту или некий интересный фон? Взгляните на следующий рисунок.

Пример особой настройки выделения

Это возможно, хотя и потребует приложения некоторых усилий. Вот как сделано выделение, показанное выше:

Добавлен псевдоэлемент, с тем же текстом, который мы выделяем. Затем псевдоэлементу задано свойство height: 50% и белый фоновый цвет.
Псевдоэлемент расположен над исходным текстом.

Если теперь выделить текст, то псевдоэлемент перекроет 50% текста по вертикали. Это позволяет сымитировать нужный нам эффект.

p {
  position: relative;
  color: #fff;
}

p:after {
  content: attr(data-content);
  position: absolute;
  color: #000;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background-color: #fff;
}

p::selection {
  background: rgba(76, 125, 225, 0.18);
}

Об этой методике я узнал здесь.

Ещё один вариант подобного выделения представлен ниже. Здесь я, вместо сплошного выделения, реализовал выделение в виде CSS-градиента. Смысл тут заключается в использовании белого градиента с высотой в 50% и в однократном заполнении элемента фоновым рисунком благодаря использованию значения no-repeat при настройке свойства background.

h1:after {
  content: attr(data-content);
  position: absolute;
  color: #000;
  top: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(#fff, #fff) top/100% 50% no-repeat;
}

На следующем рисунке показано разъяснение этой методики.

Реализация градиентного выделения

Надеюсь, я смог понятно объяснить эту идею. Вот рабочий пример.

Анимирование выделения

Работая над предыдущим примером, я задался следующим вопросом: «Реально ли анимировать выделение?». Например, в процессе выделения текста высота выделения составляет 50%. А когда указатель мыши уводят в сторону, высота выделения увеличивается до 80%. Как это сделать? А вот так:

p {
    transition: background 0.3s ease-out;
}

p:hover:after {
  background-size: 100% 80%;
}

Текст в процессе выделения

Текст после завершения выделения

Вот видео, в котором демонстрируется анимированное выделение.

Многострочный текст

Представленная выше методика настройки выделения, к сожалению, не подходит для многострочного текста. Для того чтобы, всё же, реализовать нечто подобное и для такого текста, нужно прибегнуть к возможностям JavaScript и поместить каждое слово во встроенный (строчный) элемент, например — в <span>. После того, как каждое слово окажется в собственном элементе <span>, к каждому из таких элементов надо добавить псевдоэлемент. А уже после этого к многострочному тексту можно применить вышеописанный эффект.

Вот скрипт, позволяющий поместить каждое слово в <span>-контейнер:

let paragraph = document.querySelector(".text");
const words = paragraph.textContent.split(" ");

paragraph.innerHTML = "";

words.forEach(function (word) {
  let wordItem = document.createElement("span");
  wordItem.setAttribute("data-word", word);
  wordItem.innerHTML = word + " ";
  paragraph.appendChild(wordItem);
});

После этого элементы <span> надо стилизовать. Затем к каждому из них надо добавить псевдоэлемент:

span {
    position: relative;
    font-size: 1.25rem;
    line-height: 1.4;
  }

  span::after {
    content: attr(data-word);
    position: absolute;
    left: 0;
    right: 0;
    top: -0.28em;
    height: 75%;
    padding-top: 0.14em;
    background: #fff;
    pointer-events: none;
  }

  span::selection {
    background: rgba(#4C7DE1, 0.18);
  }

Если посмотреть на эту конструкцию в деле, то окажется, что она работает, но не совсем так, как можно ожидать. Ниже показан пример выделения многострочного текста. Можно заметить, что выделение выглядит неоднородным.

Неоднородное выделение

Я бы сказал, что подобное многострочное выделение получается не очень хорошим, и что его не стоит использовать в глобальном масштабе. Возможно, его стоит применять лишь, скажем, для организации выделения какого-то отдельного абзаца.

Тут с таким выделением можно поэкспериментировать.

Креативный подход к использованию ::selection и text-shadow

Так как одним из свойств, которые поддерживает псевдоэлемент ::selection, является text-shadow, мы можем попытаться достичь каких-нибудь интересных эффектов, используя несколько теней текста. Исследуем возможности, которые открывает перед нами эта идея.

?Выделение с длинными тенями

Выделенный текст отбрасывает длинные тени

Вот как реализовать этот эффект:

p::selection {
    color: #444444;
    background: #ffffff;
    text-shadow: 1px 0px 1px #cccccc, 0px 1px 1px #eeeeee, 2px 1px 1px #cccccc, 1px 2px 1px #eeeeee, 3px 2px 1px #cccccc, 2px 3px 1px #eeeeee, 4px 3px 1px #cccccc, 3px 4px 1px #eeeeee, 5px 4px 1px #cccccc, 4px 5px 1px #eeeeee, 6px 5px 1px #cccccc, 5px 6px 1px #eeeeee, 7px 6px 1px #cccccc;
}

?Эффект контурного текста

Выделенный текст становится контурным

Эту идею я нашёл в данной статье. Речь идёт о том, что с помощью свойства text-shadow можно сымитировать эффект контурного текста.

p::selection {
    color: #fff;
    text-shadow: 
        -1px -1px 0 #000,  
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;
}

?Эффект размытия

Выделенный текст выглядит размытым

Ещё один интересный эффект, который можно применить к выделенному тексту, заключается в размытии этого текста. Суть тут в том, чтобы использовать при настройке цвета текста свойство color: transparent. Тени, задаваемые с помощью text-shadow, при этом никуда не исчезнут, что и даст нужный эффект.

p::selection {
  color: transparent;
  text-shadow: 0 0 3px #fff;
}

Уверен, что вы сами сможете придумать ещё очень много примеров применения text-shadow для стилизации выделений. Это свойство даёт нам безграничные возможности.

?Тени текстов и производительность

Не рекомендуется использовать слишком сложные стили при настройке text-shadow. Дело в том, что чрезмерное увлечение этим свойством приводит к проблемам с производительностью. Вот видео, демонстрирующее один из примеров таких проблем.

Использование очень сложных стилей при настройке выделения текста

Представленный здесь неоновый эффект очень сложен. Обратите внимание на то, что при выделении этого текста заметна задержка между моментом выделения текста и моментом применения стилизации. Кроме того, обратите внимание на то, что сверху и слева появляется то, что появляться не должно. Поэтому прошу вас использовать text-shadow осмотрительно.

Выделяются ли элементы форм?

Краткий ответ на вопрос, вынесенный в заголовок этого раздела, будет звучать как «да». Мне кажется, что это неправильно: выделяешь страницу, а оказывается, что содержимое внутри полей ввода тоже выделяется. Вот как это выглядит.

Содержимое внутри полей ввода выделяется

Тут может быть выделен и текст внутри кнопки. В разделе, посвящённом user-select, мы поговорим о том, стоит или нет позволять пользователям выделять формы элементов.

Вот пример.

Исследование свойства user-select

Свойство user-select даёт нам возможность задавать возможность выделения конкретного текста пользователем. Это свойство может оказаться полезным для отключения возможности выделения текста, что может пригодиться для ограничения возможностей пользователя по выделению материалов, расположенных рядом друг с другом. Вот стандарт, описывающий user-select.

Это свойство может принимать следующие значения: none, auto, text, contain, all.

Сценарии использования user-select

?Текст и иконка

Если в элементе есть текст и иконка — в виде символа или значка, взятого из какого-нибудь шрифта, то при выделении текста будет выделяться и эта иконка. Рассмотрим пример, представленный на следующем рисунке.

Кнопка с текстом и иконкой

Вот код этой кнопки:

<button>Our Services<span aria-hidden="true">Ў</span></button>

При выделении этого элемента он выглядит так, как показано ниже.

Выделенная кнопка

В подобном совершенно нет необходимости. Обратите внимание на то, что в разметке используется атрибут aria-hidden, скрывающий иконку от средств чтения с экрана. Для того чтобы решить проблему с выделение того, что выделять не нужно, мы можем воспользоваться следующим стилем:

button span[aria-hidden="true"] {
    user-select: none;
}

Это позволяет запретить выделение иконки. И, в то же время, мы привязываем запрет выделения к атрибуту aria-hidden. В результате всё, что не должно выделяться, скорее всего, не должно быть видимым и для средств чтения с экрана.

?Флажки

Меня раздражает такое поведение флажков, когда, устанавливая или снимая флажок, я случайно выделяю текст его описания. Вот как это выглядит.

Текст описания флажка выделен случайно

Решить эту проблему можно, стилизовав элемент <label> следующим образом:

label {
    user-select: none;
}

?Выделение всего текста

Значение all, которое может принимать свойство user-select, позволяет добиваться интересного эффекта. Если это свойство с таким значением есть у родительского элемента, то весь текст, содержащийся в таком элементе, можно выделить одним щелчком мыши. Это может оказаться полезным для работы с текстовым содержимым, которое должно выделяться целиком. Например — для выделения фрагментов кода, имеющихся на странице:

.embed-code {
    user-select: all;
}

Фрагмент текста, оформленный таким стилем, можно выделить одним щелчком мыши по нему.

Веб-приложения

Веб-приложение должно восприниматься пользователем как настоящее приложение. Можно ли выделять текст кнопок в обычных приложениях? Нет, нельзя. Важно, чтобы веб-приложения отражали привычные черты обычных приложений, делая это даже с учётом того, что они созданы с использованием HTML и CSS.

Рассмотрим несколько примеров из жизни.

?Slack

В Slack можно выделять метки и поля ввода. Однако тексты кнопок не выделяются.

Подписи кнопок не выделяются

Вот ещё один пример.

Подпись в заголовке модального окна выделяется

А дату чата выделить нельзя.

Дату выделить нельзя

В целом — мне кажется странным то, что в приложении можно выделять некоторые тексты, которые, вроде бы, не должны поддерживать выделение. В интерфейсе Slack есть места, где используется user-select: none, но таких мест меньше, чем можно ожидать. Например мне, как пользователю, нет никакой выгоды от выделения заголовка модального окна.

?Notion

Подход к выделению элементов, реализованный в Notion, мне нравится больше. Это веб-приложение больше похоже на реальное приложение, а не на веб-сайт, любую часть интерфейса которого можно выделить.

То, что не должно выделяться, не выделяется

Ни один фрагмент текста с этого рисунка не выделяется. Это — именно то, чего можно ожидать от приложения.

Не используйте глобальное отключение выделения

Не рекомендуется отключать выделение глобально. Когда вы пользуетесь отключением выделения — постарайтесь, чтобы оно отключалось бы лишь у элементов, для которых оно не имеет смысла. Для этого можно создать вспомогательный класс. Например — такой:

.disable-selection {
    -webkit-user-select:text;
    -moz-user-select:text;
    -ms-user-select:text;
    user-select:text;
}

Нехороший паттерн

Есть один UX-паттерн, который мне крайне не нравится. Он заключается в показе предупреждения при попытке выделения текста. Это раздражает и создаёт у пользователя такое ощущение, будто его взаимодействием с сайтом пытаются управлять. Пример этого паттерна показан ниже.

Запрет выделения с показом уведомления

Пожалуйста, не делайте так.

Выделение на мобильных устройствах

Существует свойство -webkit-touch-callout для iOS Safari, которое должно отключать показ стандартной подсказки, выводимой при выделении текста. Я попытался воспользоваться этим свойством, но оно не работает.

p {
    -webkit-touch-callout: none;
}

Стили ::selection тоже не работают.

А свойство user-select: none работает так, как ожидается.

Я постарался найти реальный пример, иллюстрирующий эту проблему. Я скопировал фрагмент текста из Википедии. При этом был скопирован и совершенно ненужный мне текст (listen). Это раздражает.

Вместе с полезным текстом скопировано и (listen)

Вместо того чтобы позволять пользователю копировать это вот «listen», лучше было бы добавить к этому элементу стиль user-select: none. В результате при копировании текста, содержащего этот элемент, он копироваться не будет.

Итоги

Здесь мы рассмотрели методы настройки выделения элементов веб-страниц с использованием средств CSS. Возможно, вам интересно будет взглянуть и на этот материал.

Уважаемые читатели! Как вы настраиваете выделение текстов в своих проектах?

Источник

При посещении тех или иных сайтов можно заметить такую особенность, когда
при выделении текста на странице, он может менять свой стиль. Такого эффекта можно
достаточно просто добиться используя специальный псевдоэлемент ::selection.

Вот как это работает:

<!doctype html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Изменяем стиль выделенного текста в CSS</title>



  

  <style>

    

    .content {

      color: #111;

      border: 1px solid #ccc;

      background: #fff;

      box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Параметры тени */

      padding: 10px;

    }

    

    

    // применяем псевдоэлемент к нашему классу

    .content::selection {

      color: red;

      background: blue;

    }

    

  </style>

  

</head>

<body>

  <div class="content">

    Это просто текст, который меняет свой стиль при выделении. Посмотрите как этот пример

    работает  в браузере.

  </div>

</body>

</html>

В данном примере я специально использовал контрастные цвета, красный текст на синем фоне. Вы, конечно, же можете использовать цвета из
цветовой палитры вашего собственного сайта. А для тех, кто хочет узнать о том как верстать качественные сайты у меня есть специальный курс «Система «Вёрстка сайта с нуля 2.0»

Создано 23.05.2019 13:30:01
Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Кнопка:

Она выглядит вот так:
Текстовая ссылка:

Она выглядит вот так: Как создать свой сайт
BB-код ссылки для форумов (например, можете поставить её в подписи):

Источник

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
9.0+	2.0+	9.5+	1.1+	1.0+	1.0+	1.0+

Краткая информация

Применяется	К выделенному тексту
Ссылка на спецификацию	http://www.w3.org/TR/css3-selectors/#selection

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

Псевдоэлемент ::selection применяет стиль к выделенному пользователем тексту. В правилах стилей допускается использовать следующие свойства: color, background и background-color.

Синтаксис

элемент::selection { … }

Значения

Нет.

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>selection</title>
  <style>
   p::selection {
    color: #ff0; /* Цвет текста */
    background: #000; /* Цвет фона */
   }
  </style>
 </head>
 <body>
  <p>При выделении этого текста он изменит свой цвет.</p>
 </body>
</html>

Результат примера показан на рис. 1. В данном примере при выделении текста он изменяет свой цвет и фон.

Рис. 1. Результат использования псевдоэлемента ::selection

Браузеры

Firefox использует нестандартный псевдоэлемент ::-moz-selection.

Источник

Пример

Пример

Пример

Как изменить цвет полей Textarea и Input при выборе текста

Пример

Пример

Пример

Пример

См. также

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

Цвет выделения для отдельного текста на сайте

Задаем уникальный цвет выделения текста с использованием CSS

Поддержка браузерами

Пример использования

Код CSS

Подбор цветов

Выделение текста жирным, курсивом и цветом.

Выделение текста жирным начертанием.

Выделение текста курсивом.

HTML выделение цветом.

Меняем цвет фона выделенного текста с помощью CSS / Dimox.name

Примеры

Интересный эффект выделения текста с использованием псевдоэлемента CSS выделения

Html выделить текст цветом (фон), рамкой

Как сделать рамку в html вокруг текста

Толщина и размер рамки

Вид рамки

Html рамка по длине текста

Как выбрать цвет рамки и фона

Изменяем цвет при выделении текста на сайте c помощью CSS3

Шаг 1. HTML

Шаг 2. CSS

Выделения всего текста на сайте:

Выделения отдельного текста на сайте

Вот и все. Готово!

Читайте также:

Выделение и CSS +31

Основы

Свойства, поддерживаемые ::selection

Настройка собственных эффектов выделения

Анимирование выделения

Многострочный текст

Креативный подход к использованию ::selection и text-shadow

?Выделение с длинными тенями

?Эффект контурного текста

?Эффект размытия

?Тени текстов и производительность

Выделяются ли элементы форм?

Исследование свойства user-select

Сценарии использования user-select

?Текст и иконка

?Флажки

?Выделение всего текста

Веб-приложения

?Slack

?Notion

Не используйте глобальное отключение выделения

Нехороший паттерн

Выделение на мобильных устройствах

Итоги

Краткая информация

Версии CSS

Описание

Синтаксис

Значения

Браузеры