Select css: Стилизация Select с помощью css, как будто это 2020

Содержание

::selection — CSS | MDN

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

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

::selection {
  background: cyan;
}

Только небольшое подмножество CSS-свойств может быть использовано с псевдоэлементом ::selection :

color (en-US)
background-color
cursor
caret-color (en-US)
outline (en-US) и его длинные записи

text-decoration (en-US) и связанные свойства
text-emphasis-color (en-US)
text-shadow

Предупреждение: Заметим, что, в частности, свойство background-image игнорируется.

/* синтаксис Firefox */
::-moz-selection

Error: could not find syntax for this item

HTML

<div>Этот текст будет стилизован особым образом при выделении.</div>
<p>Также попробуйте выделить текст в этом параграфе.</p>

CSS

/* Сделаем выделенный текст золотым с красным фоном */
::-moz-selection {
  color: gold;
  background: red;
}
::selection {
  color: gold;
  background: red;
}
/* Сделаем выделенный в параграфе текст белым на синем фоне */
p::-moz-selection {
  color: white;
  background: blue;
}
p::selection {
  color: white;
  background: blue;
}

Результат

Спецификация	Статус	Комментарий
CSS Pseudo-Elements Level 4 Определение ‘::selection’ в этой спецификации.	Рабочий черновик	Изначальное определение.

Примечание: Хотя псевдоэлемент ::selection присутствовал в черновиках стандарта CSS Selectors Level 3, он был убран в течение фазы Candidate Recommendation, так как его поведение было недостаточно проработано (особенно с вложенным элементами) и согласованность не была достигнута (основываясь на обсуждении в списке рассылки W3C Style).

Этот псевдоэлемент был возвращён в Pseudo-Elements Level 4.

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Found a content problem with this page?

Edit the page on GitHub.
Report the content issue.
View the source on GitHub.

Want to get more involved?

Learn how to contribute.

This page was last modified on 30 нояб. 2022 г. by MDN contributors.

user-select ⚡️ HTML и CSS с примерами кода

Свойство user-select управляет поведением выделения текста и других элементов на странице, в частности, позволяет запретить выделение текста.

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

Демо

Интерфейс

appearance
box-sizing
caret-color
cursor
outline
outline-width
outline-style
outline-color
outline-offset
resize
text-overflow
user-select

Синтаксис

/* Keyword values */
user-select: none;
user-select: auto;
user-select: text;
user-select: contain;
user-select: all;
/* Global values */
user-select: inherit;
user-select: initial;
user-select: unset;
/* Mozilla-specific values */
-moz-user-select: none;
-moz-user-select: text;
-moz-user-select: all;
/* WebKit-specific values */
-webkit-user-select: none;
-webkit-user-select: text;
/* Doesn't work in Safari; use only
"none" or "text", or else it will
allow typing in the <html> container */
-webkit-user-select: all;
/* Microsoft-specific values */
-ms-user-select: none;
-ms-user-select: text;
-ms-user-select: element;

Значения

auto: Для редактируемых элементов значение принимается contain. Если у родителя значение user-select установлено как all, то для элемента оно тоже будет all. Если у родителя значение user-select установлено как none, то для элемента оно тоже будет none. Во всех остальных случаях принимается значение text.
none: Пользователю запрещено выделять элемент.
text: Пользователь может выделить текст в элементе.
all: Позволяет выделить текст внутри элемента, включая дочерние элементы.
contain: Позволяет выделять текст, но только внутри границ элемента.

Примечание

Internet Explorer поддерживает свойство -ms-user-select.
Chrome, Opera, Safari и Android поддерживают свойство -webkit-user-select.
Firefox поддерживает свойство -moz-user-select.
Значение contain поддерживается только в IE.

Значение по-умолчанию: auto

Применяется ко всем элементам

Спецификации

CSS Basic User Interface Module Level 4

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

Can I Use user-select-none? Data on support for the user-select-none feature across the major browsers from caniuse.com.

Описание и примеры

<html>
  <head>
    <meta charset="utf-8" />
    <title>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>
      Этот <b>текст</b> тоже можно выделить
    </p>
  </body>
</html>

3 уровня CSS-селекторов для выбора всех элементов

Style-facts part3

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

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

 .page-container div

Это, например. Где ‘div’ является наиболее широко используемым элементом, нацеленным на случайный ‘div’ в глобальном классе, будет нацелен на каждый ‘div’-элемент на вашей странице. Выбор каждого класса и элемента на пути к цели будет противоположным сценарием. Это неэффективный способ нацеливания на стиль элемента. Это дает вам массивные таблицы стилей, которые каждый раз нацелены на очень мало.

Типы селекторов:

Итак, какие типы селекторов существуют? В стилях у нас есть 5 типов селекторов. Я перечислил их для вас в предпочтительном порядке использования:

Class

 .class-selector {}

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

Element

 element-selector {}

Element-selector слабее, чем использование class-selector и целевых типов элементов напрямую.

Атрибут

 element[attribute="selector"] {}

Это слабее (менее конкретно), чем использование селектора элемента, и записывается в скобках ‘[]’.

Универсальный элемент

 > * {} /* универсальный селектор*/

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

ID

 #idSelector {}

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

Комбинаторы:

При объединении классов они становятся более конкретными. Таким образом, вы можете ориентироваться на классы, которые вложены глубже в ваш шаблон, не затрагивая другие элементы. Существует четыре способа объединения селекторов в комбинатор: по потомкам, дочерним элементам, одноуровневому элементу и общий одноуровневый комбинатор. Наиболее известным и наиболее часто используемым является Комбинатор потомков:

Потомок

 .parent-class .descendant-class

Здесь (родительский) элемент и элемент на (нескольких) более вложенных уровнях объединяются в один селектор. .
Селектор вложенного уровня не обязательно должен быть дочерним элементом элемента, на который нацелен родительский селектор. Вот как вы можете пропустить уровни явных селекторов, чтобы перейти к целевому селектору через «уникальные» ориентиры в вашем шаблоне.

Дочерний

 .parent-class > .child-class

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

Одноуровневый

 .parent-class + .sibling-class

С появлением CSS2 мы можем нацеливаться на одноуровневые и общие одноуровневые элементы с помощью комбинаторов. Родственный селектор со знаком «+» в приведенном выше примере предназначен для непосредственного следующего родственного элемента предыдущего связанного селектора (элемента). Чтобы выбрать всех братьев и сестер с помощью следующего связанного селектора, можно использовать «~». Как в примере ниже:

General sibling

 .parent-class ~ .general-sibling-class

Мы узнали, какие типы селекторов бывают: классовые, элементные, атрибутивные, универсальные и ID-селектор. Мы умеем их комбинировать: через потомка, потомка или общего/братского. Итак, мы готовы перейти к селекторам, которые могут нацеливаться на неявные элементы. Так называемые псевдоселекторы.

Псевдоселекторы

Псевдоселекторы позволяют выбирать элемент неявным образом на основе состояния или местоположения. Например: если вам нужен второй дочерний элемент элемента с определенным селектором. Другой пример — выбор элемента только при наведении курсора. Существует множество псевдоселекторов, и каждый месяц добавляются новые в качестве экспериментальных селекторов CSS3. Чтобы проверить доступность, перейдите на сайт www.caniuse.com и введите селектор, который вы хотите использовать, чтобы проверить, поддерживают ли его уже наиболее часто используемые браузеры.

состояние

Псевдоселекторы можно разделить на 2 группы: на основе целевого местоположения или на основе определенного состояния элемента. Чтобы проиллюстрировать группу состояний, мы можем просмотреть псевдоселекторы в элементе ссылки action ‘‘. Видишь, что я там сделал? 🙂
Ниже вы можете увидеть пример нескольких распространенных псевдоселекторов ссылок, ‘:hover’, ‘:link’, ‘:visited’:

 .link-element:link {} 
 .link-element:visited {} 
 .link-element:hover {}

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

location

Вторая группа селекторов псевдо(-класса) — это селекторы для указания местоположения элемента. Возможно, вы знаете псевдоселектор ‘:first-child’. Это нацелено на первый дочерний элемент выбранного элемента. Итак, если у вас есть:

 .list > div:first-child {} /* выбирает первый дочерний элемент в списке */

Это выберет первый дочерний элемент в элементе с классом [class]. Аналогичным образом можно настроить таргетинг на последнего ребенка. Вы можете сделать это, определив «: last-child». Для каждого дочернего элемента между ними был создан новый псевдоселектор. Так называемый «:nth-child»-селектор. Этот селектор дает вам возможность выбрать один или несколько дочерних элементов. Вы даже можете написать уравнения в атрибутах, чтобы выбрать различные последовательности дочерних элементов. Поясню на примере:

 .list > div:last-child {} /* выбирает последний дочерний элемент в списке */ 
 . list > div:nth-child(odd) {} /* выбирает нечетных дочерних элементов в списке */ 
 .list > div:nth-child(7) {} /* выбирает 7-й дочерний элемент в списке */ 
 .list > div:nth-child(4n+1) {} /* выбирает дочерний элемент 1,5,9 и т. д. в списке * /

Такой выбор может быть удобен в списках или таблицах, в которых все элементы и строки состоят из одних и тех же элементов. Не имеет значения, указаны ли элементы с классом. Вы можете ориентироваться на них в любом случае. В codepen вы можете найти пример таргетинга на nth-child. Я сделал вам что-то вроде парящей игры памяти энного ребенка :). Сможете ли вы найти все дуэты цветов, взглянув на селекторы?
Я упомянул, что вы можете добавить математическое уравнение в селектор ‘n-th-child’. Возьмем, к примеру, «4n + 1». Вы можете узнать это по урокам математики в старшей школе. Это похоже на 4x +1. Он выбирает каждого четвертого потомка, а затем сдвигает выделение на единицу. Выбор следующего элемента. Это означает 1 (4 x 0 +1), 5 (4 x 1 +1), 9 (4 x 2 +1) и так далее… вот подробный блог о селекторе «nth-child».

Псевдоэлементы

Перейдем к псевдоэлементам. Они были введены в CSS3 для добавления украшения к элементам семантически правильным. Например, добавление значка к кнопке без добавления пустого тега «i» или добавление таргетинга на элемент-заполнитель, который является невидимым элементом, принадлежащим элементу «вход». Вы можете видеть этот селектор как «выбор части элемента». Обычно для этого вы создаете новый элемент, но теперь вы можете сделать его частью исходного элемента.

Давайте посмотрим на псевдоэлемент в действии:

 .selector-class::before { 
 content: "x"; 
 позиция: абсолютная; 
 дисплей: блок; 
 верх: 0; 
 осталось: 0; 
 ширина: 30 пикселей; 
 высота: 30 пикселей; 
 цвет фона: серый; 
 }

Здесь вы можете найти полный набор селекторов псевдоэлементов. Какие еще волшебные вещи вы можете делать с псевдоэлементами, мы обсудим в следующей главе этого блога.

выбор детского элемента каратэ

Теперь вы знаете, какой селектор можно использовать в какой ситуации.

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

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

StyleFacts, часть 1

StyleFacts, часть 2

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

Замена блока выбора со стилем в чистом CSS и семантическом HTML | Росс Ангус

7 минут чтения

3 марта 2017 г.

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

Поля выбора могут исчезнуть с холста браузера при определенных обстоятельствах (брррр)

Измените их внешний вид, и пользователи больше не будут знать, что они ищут.

Хорошо. Подождите, вы еще хотите их стилизовать? ОТЛИЧНО.

Есть несколько библиотек JavaScript, которые могут помочь — например, Chosen со сбивающим с толку названием, jQuery selectBox, SelectBoxIt или Select2. Некоторые из них добавляют полезные функции, такие как поиск. Но всех их объединяет одно: реализация не занимает много времени, зато есть всегда проблем с ними на этапе пользовательского приемочного тестирования проекта. Многие из этих проблем возникают из-за того, что все эти библиотеки скрывают исходное поле выбора и дублируют его другими элементами HTML, такими как привязки или теги ввода. Это означает, что события, добавленные в исходное поле выбора, часто теряются, а действия пользователя не записываются должным образом.

Что, если бы мы могли сделать то же самое в чистом, привлекательном CSS, используя нативные HTML-элементы, которые имеют смысл семантически?

Существует несколько различных типов полей выбора:

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

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

Моя первоначальная мысль была: «Что, если я поместил кучу радиокнопок и ярлыков внутри контейнера, а затем расширил контейнер, когда один из них достиг фокуса?» Это будет работать следующим образом:

Сами радиокнопки будут визуально скрыты
Теги меток будут располагаться друг над другом, используя position: absolute
Контейнер также должен быть абсолютно позиционируется таким образом, что когда он расширяется, он находится поверх любого последующего содержимого
Как только один из переключателей достигнет фокуса, положение всех элементов label внутри контейнера изменится на static . Так как ранее я также изменил их свойство display на block , они будут располагаться друг над другом и заставлять контейнер принимать свою полную естественную высоту

Я сделал все это, и вот что получилось:

Основная проблема заключается в том, что невозможно фактически выбрать какое-либо значение. Я предполагаю, что это связано с событием размытия (из-за отсутствия лучшего имени), происходящим до фокусировки на 9Элемент 0186 label выбирает следующий переключатель.

Но есть еще одна более серьезная проблема. Правило, выполняющее большую часть работы, заключается в следующем:

input:focus ~ label {position: static;}

Это читается по-английски как «Если элемент input помещен в фокус, то измените все ». следующие теги label для позиции : static «. ~ — это следующий родственный селектор. В CSS нет следующего селектора и , и вряд ли когда-либо будет, если вы не используете flexbox. Я думаю это потому, что CSS мыслит с точки зрения синтаксического анализа вниз DOM сверху вниз (по той же причине в CSS нет родительского селектора). Он не такой гибкий, как JavaScript, который носится по всему дереву, как шимпанзе.

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

Это сработало, но я подумал, нельзя ли это улучшить.

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

Что, если бы сам переключатель выбора был частью той же серии радиокнопок, что и остальная часть поля выбора? На этот раз ключевое правило таково:

.radio-toggle:checked ~ .select label {position: static;}

На английском языке это правило гласит: «если проверен элемент с классом radio-toggle , найти все следующие элементы с класс выберите , затем измените положение всех элементов label внутри него на static «.

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

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

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

И, конечно же, захват нажатий клавиш и обеспечение специальной навигации в отдельном поле выбора полностью вне юрисдикции CSS. Это значит, что пришло время для:

Большая часть JavaScript предназначена для захвата и интерпретации различных нажатий клавиш, таких как:

Клавиши курсора (перемещение вверх и вниз — в основном это бесплатно, но JavaScript останавливает фокус в конце и начале диапазона значений)
Страница вверх (перемещение на настраиваемое расстояние вверх или к первому значению, если применимо)
Страница вниз (как указано выше, но вниз)
Пробел (открывает поле выбора)
Ввод (переключает поле выбора открытые и закрытые)
Escape (закрывает окно выбора)

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

Навигация с помощью клавиатуры JavaScript — спорный вопрос, поэтому я попытался воспроизвести поведение окна выбора по умолчанию (Windows, извините). Для навигации с помощью клавиатуры в других элементах страницы я бы посоветовал ознакомиться с WAI-ARIA Authoring Practices или, если у вас есть проблемы с W3C по какой-либо причине, с проектом A11Y.

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

Поскольку элемент .select позиционирован абсолютно, он должен появиться внутри другого элемента, что оставит для него место в обычном потоке документов
Элемент .select фактически display: block : он займет всю ширину любого элемента, который вы поместите внутрь. Обычные элементы select фактически являются display: inline-block и будут принимать ширину выбранного в данный момент элемента option. Но поскольку мы удаляем текущий выбранный элемент из потока документов, мы не знаем его размера.
Обычные элементы выбора в какой-то степени осведомлены о области просмотра браузера и даже о краях экрана. Это означает, что при необходимости они могут расширяться до такой степени, что выходят из самого браузера и размещаются поверх него (см. изображение вверху этого поста). Именно такое поведение дает им репутацию части операционной системы, а не части веб-страницы. Фальшивое поле выбора ограничено корневым элементом страницы и не может выйти за его пределы. Он всегда занимает всю необходимую ему высоту, чтобы отобразить все его параметры (если только вы не хотите указать для него высоту и переполнение).
Из-за используемого захватывающего CSS это будет работать только в IE9 и выше (если вам нужна поддержка браузеров ниже IE9, я предлагаю загрузить Sizzle в условных комментариях внутри заголовка).
Мобильные пользователи никогда не увидят собственный стиль окна выбора, который занимает большую часть или весь экран.
No related posts.