Выделение текста css: Выделение и CSS / Хабр

02.10.2023 alexxlab

Содержание

user-select. Выделение текста в CSS

CSS стиль user-select управляет поведением выделения текста и других элементов на странице. Это незаменимое CSS свойство когда нужно запретить выделение текста. Настольные Мобильные

Internet Explorer	Chrome	Opera	Safari	Firefox
10	4	15	3.1	2

Android	Firefox Mobile	Opera Mobile	Safari Mobile
2.1	2	30	3.2

Internet Explorer поддерживает свойство -ms-user-select.

Chrome, Opera, Safari и Android поддерживают свойство -webkit-user-select.

Firefox поддерживает свойство -moz-user-select
.

Значение contain поддерживается только в IE.

Чаще всего CSS стиль user-select применяется для кликабельных интерактивных элементов, для которых нежелательно выделение текста.

Краткая информация по CSS-свойству user-select

Значение по умолчанию	`auto`
Наследуется	Да
Применяется	Ко всем элементам

Правила написания свойства user-select

user-select: auto | none | text | all | contain

Пройдемся теперь по всем значениям.

auto — для редактируемых элементов значение принимается contain. Если у родительского элемента user-select установлено как

all (none), то для элемента оно тоже будет all (none). Во всех остальных случаях принимается значение text.

none — пользователю запрещается выделять элемент.

text — пользователь может выделить текст в элементе.

all — позволяет выделить текст внутри элемента, включая дочерние элементы.

contain — позволяет выделять текст, но лишь внутри элемента.

Пример применения стиля user-select

Проиллюстрируем работу user-select на примере. Давайте сделаем так, чтобы верхний текст нельзя было выделить. Не забудьте про кроссбраузерное написание user-select.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Пример CSS стиля user-select</title>
<style>
  body { 
    -ms-user-select: none; 
    -moz-user-select: none; 
    -webkit-user-select: none; 
    user-select: none; 
   }
   .enable { 
    -ms-user-select: all; 
    -moz-user-select: all; 
    -webkit-user-select: all; 
    user-select: all; 
   }
</style>
</head>
<body>
  <p>Ха! А этот текст нельзя выделить</p>
  <p><input type="text" value="Этот текст выделяется"></p>
  <p>Этот текст тоже выделяется</p>
</body>
</html>

Применение свойства user-select

Как разрешить или запретить выделять текст на CSS.

Основы Unreal Engine 5

Пройдя курс:

— Вы получите необходимую базу по Unreal Engine 5

— Вы познакомитесь с множеством инструментов в движке

— Вы научитесь создавать несложные игры

Общая продолжительность курса 4 часа, плюс множество упражнений и поддержка!

Чтобы получить Видеокурс,
заполните форму

E-mail:
Имя:

Другие курсы

Как создать профессиональный Интернет-магазин

После семинара:

— Вы будете знать, как создать Интернет-магазин.

— Вы получите бесплатный подарок с подробным описанием каждого шага.

— Вы сможете уже приступить к созданию Интернет-магазина.

Записаться

Другие курсы

Если хочешь, чтобы твои сны сбывались, поменьше спи.

Неизвестный

Привет всем! В этой короткой статье я хочу рассказать про одно свойство, которое может кому-нибудь оказаться полезным — user-select.

Данное свойство позволяет разрешить или запретить выделение текста на странице.

Однако, текстовые поля формы можно будет выделять в любом случае.

Теперь поговорим о значениях.

-moz-user-select: all;-moz-user-select: text;
-moz-user-select: none;

В первом случае двойным щелчком можно будет выделить весь текст внутри родителя.

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

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

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

Чтобы это работало в браузерах, использующих движок

webkit, нужно прописать префикс -webkit-.

-webkit-user-select: auto;-webkit-user-select: none;
-webkit-user-select: text;

text — можно выделять текст в элементе.

none — выделять элемент запрещено.

auto — можно выделять элемент.

Вот такое свойство, которое, иногда, находит применение и знать его нужно.

Спасибо за внимание и до скорого!

Создано 25.07.2014 20:30:49
Михаил Русаков

Предыдущая статьяСледующая статья

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

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

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

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

Порекомендуйте эту статью друзьям:

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

Кнопка:
<a href=»https://myrusakov. ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>
Она выглядит вот так:
Текстовая ссылка:
<a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>
Она выглядит вот так: Как создать свой сайт
BB-код ссылки для форумов (например, можете поставить её в подписи):
[URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

html — Какой CSS мне нужен, чтобы пометить фрагмент текста как выделенный?

спросил

4 года 9 месяцев назад

Изменено 4 года, 9 месяцев назад

Просмотрено 678 раз

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

(Я хотел бы показать изображение этого эффекта здесь, но stackoverflow не позволяет мне опубликовать его, потому что у меня пока недостаточно очков репутации.)

Какая разметка CSS и/или HTML мне нужна для этого?

В качестве примечания: мое приложение написано с помощью React.

html
css
highlight

Вам нужно использовать семантический тег для этого:

Это выделенный текст.

Затем вы можете стилизовать его как хотите, используя CSS:

 mark {
  цвет фона: HotPink;
}

Это дополнительный выделенный текст.

Есть много способов сделать это:

Выделить с помощью тега HTML

 Вот пример выделенного текста с помощью тега <mark> ярлык.

Выделить текст только с кодом HTML

 Желтый текст.

Выделение текста с помощью CSS и HTML

 body { background-color:green; }
.highlight {фоновый цвет:#FFFF00; }
p {цвет фона:#FFFFFF;

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

не имеет значения, написано ли приложение на React на любом другом фреймворке. Вы всегда можете определить CSS для базового HTML-тега, например, предложенный @Salaman.

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

 отметка.hotPink {
  цвет фона: HotPink;
}

Не забудьте проверить наше горячее новое предложение сегодня.

Кроме того, вы также можете ознакомиться с нашими стандартными предложениями.

Вы можете написать CSS для тега, но, вероятно, не захотите делать это для каждого тега mark (потому что вы не знаете, может ли это повлиять на какую-либо другую часть системы. Лучший (и самый безопасный) способ сделать это — создать собственный класс (т. е. и назначить его своей метке.

Надеюсь, это поможет, всего наилучшего! 🙂

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

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

Как изменить цвет выделения текста с помощью CSS

John Mwaniki / 13 октября 2021 г.

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

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

Переключение фона веб-страницы…

Включите JavaScript

Переключение фона веб-страницы и цвета текста с помощью JavaScript и CSS3

Пример 1

Пример 2

Пример 3

Это цвет выделения может отличаться из-за:

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

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

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

Пример 1

Я сделал снимок экрана ниже на странице этого веб-сайта с помощью браузера Firefox в Ubuntu 20.04.

Пример 2

Я сделал снимок экрана ниже с той же веб-страницы, что и выше, с помощью браузера Firefox в Windows 10.

Настройка разработчиком

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

Как выбрать предпочтительный цвет выделения текста с помощью CSS

Чтобы установить цвет выделения/выделения текста, мы используем псевдоэлемент CSS ::selection .

Следующие свойства CSS могут быть применены к ::selection :

color
фон
курсор
контур

Вы можете настроить все вышеперечисленные свойства на выбранной веб-странице, используя ::selection , как в примерах ниже:

Пример

 

<голова>
Настройка цвета выделения текста
<стиль>
:: выбор {
  цвет: желтый;
  фон: зеленый;
}


<тело>
 Заголовок один 
Это образец абзаца.  Выберите его, чтобы выделить!
Это элемент div

Ниже приведен скриншот вышеуказанной страницы с абзацем, выделенным зеленым цветом фона и желтым цветом текста.

Если вы хотите, чтобы цвет выделения применялся только к определенным элементам страницы, например. div, абзац и т. д., вы просто добавляете селектор CSS этого элемента перед ::selection .

Пример

 p::selection {
  белый цвет;
  фон: синий;
}

Вы также можете использовать Id или Class элемента с ::выбор псевдоэлемент.

 #параграф2::выбор {
  цвет: желтый;
  фон: зеленый;
}
.paragraph3 :: выбор {
  белый цвет;
  фон: оранжевый;
}

В приведенном выше примере текст внутри элемента с идентификатором ‘ para2 ‘ будет иметь желтый цвет и зеленый фон при выборе. Текст внутри элемента с классом « параграф3 » будет иметь белый цвет и оранжевый фон при выборе.

Выделение текста css: Выделение и CSS / Хабр

user-select. Выделение текста в CSS

Краткая информация по CSS-свойству user-select

Правила написания свойства user-select

Пример применения стиля user-select

Как разрешить или запретить выделять текст на CSS.

html — Какой CSS мне нужен, чтобы пометить фрагмент текста как выделенный?

Зарегистрируйтесь или войдите в систему

Опубликовать как гость

Опубликовать как гость

Как изменить цвет выделения текста с помощью CSS

Пример 1

Пример 2

Пример 3

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

Пример 1

Пример 2

Настройка разработчиком

Как выбрать предпочтительный цвет выделения текста с помощью CSS

Пример

Заголовок один

Пример

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