user-select — CSS | MDN

Свойство CSS user-select определяет может ли пользователь выбрать текст. Оно не влияет на контент, загруженный как chrome, за исключением текстовых блоков.

/* Ключевые слова в значении */
user-select: none;
user-select: auto;
user-select: text;
user-select: contain;
user-select: all;
/* Глобальные значения */
user-select: inherit;
user-select: initial;
user-select: unset;
/* Специфичные для Mozilla значения */
-moz-user-select: none;
-moz-user-select: text;
-moz-user-select: all;
/* Специфичные для WebKit значения */
-webkit-user-select: none;
-webkit-user-select: text;
-webkit-user-select: all; /*Не работает Safari; используйте только
                             "none" или "text", или, в противном случае, оно
                             будет разрешать ввод в <html> контейнер */
/* Специфичные для Microsoft значения */
-ms-user-select: none;
-ms-user-select: text;
-ms-user-select: element;
none

Текст элемента и вложенных в него элементов не выбирается. Обратите внимание, что объект Selection может содержать эти элементы.

auto

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

  • Для псевдо-элементов ::before и ::after вычисляемое значение — none
  • Если элемент является редактируемым, вычисляемое значение — contain
  • Иначе, если вычисляемое значение user-select для родителя этого элемента — all, вычисляемое значение — all
  • Иначе, если вычисляемое значение
    user-select     для родителя этого элемента — none, вычисляемое значение — none
  • Иначе, вычисляемое значение — text
text

Текст может быть выбран пользователем.

all

В HTML-редакторе, если двойной клик или контекстный клик произошёл во вложенном элементе, будет выбрано все содержимое коренного предка с этим значением свойства.

contain

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

element Non-standard (IE-specific alias)

Аналогичен contain. Поддерживается только в Internet Explorer.

Примечание: CSS UI 4 renames user-select: element to contain.

Формальный синтаксис

user-select = 
auto     | (en-US)
text     | (en-US)
none     | (en-US)
contain  | (en-US)
all

HTML

<p>You should be able to select this text.</p>
<p>Hey, you can't select this text!</p>
<p>Clicking once will select all of this text.</p>

CSS

.unselectable {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.
 
 all {
  -moz-user-select: all;
  -webkit-user-select: all;
  -ms-user-select: all;
  user-select: all;
}

Результат

Specification
CSS Basic User Interface Module Level 4
# content-selection

BCD tables only load in the browser

with JavaScript enabled. Enable JavaScript to view data.
  • ::selection
  • Объект JavaScript Selection.
  • user-select in CSS Basic User Interface Module Level 4.

Last modified:

10 окт. 2022 г., by MDN contributors

— HTML — Дока

Кратко

Секция статьи «Кратко»

Элемент <select> используется, когда нужно показать выпадающий список.

Пример

Секция статьи «Пример»
<form>  <label for="city-select">Ваш город</label>  <select name="city">    <option value="">-- Выберите город --</option>    <option value="petersburg">Санкт-Петербург</option>    <option value="samara">Самара</option>    <option value="perm">Пермь</option>    <option value="novosibirsk">Новосибирск</option>  </select></form>
          <form>
  <label for="city-select">Ваш город</label>
  <select name="city">
    <option value="">-- Выберите город --</option>
    <option value="petersburg">Санкт-Петербург</option>
    <option value="samara">Самара</option>
    <option value="perm">Пермь</option>
    <option value="novosibirsk">Новосибирск</option>
  </select>
</form>
Открыть демо в новой вкладке

Подробно

Секция статьи «Подробно»

В примере выше показано типовое использование элемента <select>. Это своего рода обёртка над списком опций, которые задаются тегом <option>. Чтобы иметь возможность отправить выбранное значение на сервер, необходимо выполнить несколько условий:

  • задать тегу <select> атрибут name;
  • задать каждому тегу <option> атрибут value. Если этот атрибут не задан, то его значение будет равно текстовому содержимому тега <option>.

Если нужно, чтобы изначально был выбран какой-то элемент из списка, нужно задать соответствующему тегу <option> атрибут selected.

Внутри тега <select> могут использоваться только теги <option> и <optgroup>.

Атрибуты

Секция статьи «Атрибуты»

Тег <select> используется совместно с несколькими специфическими, а так же с большинством атрибутов для элементов форм.

autocomplete Секция статьи «autocomplete»

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

autofocus Секция статьи «autofocus»

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

disabled Секция статьи «disabled»

Атрибут булевого типа. Если задан, то выпадающий список отключается для взаимодействия с пользователем. Если атрибут не задан, то он может быть унаследован у одного из предков (например у контейнера <fieldset> или <form>. Если ни у одного предка вверх по дереву этот атрибут не задан, то выпадающий список доступен для взаимодействия.

form Секция статьи «form»

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

multiple Секция статьи «multiple»

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

name Секция статьи «name»

Имя выпадающего списка. При отправке формы значение атрибута name будет ключом в отправляемом объекте.

required Секция статьи «required»

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

size Секция статьи «size»

Числовой атрибут. Если включён атрибут multiple, то это число указывает на количество видимых пунктов списка.

Открыть демо в новой вкладке

Подсказки

Секция статьи «Подсказки»

💡 Выбрать несколько элементов списка, когда включён атрибут multiple, можно, используя клавиши Ctrl, Cmd и Shift. Клавиши Ctrl (Windows, Linux) и Cmd (Mac OS) работают одинаково. Мы зажимаем эту клавишу на клавиатуре, а затем кликаем мышкой в нужные пункты списка. Этим способом можно выбрать несколько пунктов, находящихся на разном расстоянии друг от друга. Если выбрать пункт списка, зажать клавишу Shift и выбрать любой другой, то будут выбраны последовательно все пункты списка между этими двумя.

На практике

Секция статьи «На практике»

Денис Ежков советует

Секция статьи «Денис Ежков советует»

🛠 Выпадающий список — это один из элементов формы, почти не поддающихся стилизации. Мы можем немного изменить внешний вид самого элемента <select>, но выпадающий список опций вообще не стилизуется. Многие дизайнеры любят рисовать нестандартные выпадающие списки в угоду красоте, но реализация таких списков очень трудоёмка и невозможна на чистом HTML и CSS. Рекомендуется для выпадающих списков оставлять родной вид, потому что такие списки обладают рядом преимуществ перед нестандартными. Например, выпадающий список опций может выходить за границы окна браузера, давая пользователю возможность выбрать нужный элемент.

🛠 Несмотря на вышесказанное, немного стилизовать выпадающий список всё же можно. Но только отображение самого <select>, но не списка опций. Вот как можно изменить вид стрелочки:

<form>  <label for="city-select">Нестандартная стрелочка</label>  <div>    <select name="city">      <option selected disabled>-- Выберите город --</option>      <option value="petersburg">Санкт-Петербург</option>      <option value="moscow">Москва</option>      <option value="kazan">Казань</option>      <option value="samara">Самара</option>      <option value="perm">Пермь</option>      <option value="novosibirsk">Новосибирск</option>    </select>  </div></form>
          
 
<form>
  <label for="city-select">Нестандартная стрелочка</label>
  <div>
    <select name="city">
      <option selected disabled>-- Выберите город --</option>
      <option value="petersburg">Санкт-Петербург</option>
      <option value="moscow">Москва</option>
      <option value="kazan">Казань</option>
      <option value="samara">Самара</option>
      <option value="perm">Пермь</option>
      <option value="novosibirsk">Новосибирск</option>
    </select>
  </div>
</form>

В данном случае мы оборачиваем наш <select> дополнительным блоком, чтобы задействовать псевдоэлемент ::after этого блока. К сожалению, <select>

относится к такому типу элементов, у которых нет своих псевдоэлементов ::before и ::after.

.select-wrapper {  position: relative;}.select-wrapper::after {  content: "⬇️";  position: absolute;  right: 0;  margin-top: -2px;  pointer-events: none;}select {  appearance: none;  width: 200px;  padding: 4px;  border-color: #aaa;  border-radius: 3px;}
          .select-wrapper {
  position: relative;
}
.select-wrapper::after {
  content: "⬇️";
  position: absolute;
  right: 0;
  margin-top: -2px;
  pointer-events: none;
}
select {
  appearance: none;
  width: 200px;
  padding: 4px;
  border-color: #aaa;
  border-radius: 3px;
}

Используем свойство

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

Открыть демо в новой вкладке

html select — Как стилизовать только с помощью CSS?

Спросил

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

Просмотрено 344k раз

105

Новинка! Сохраняйте вопросы или ответы и организуйте свой любимый контент.
Узнать больше.

Примечание. Этот вопрос не касается создания пользовательского раскрывающегося списка. Речь идет только о возможностях стилизации

элементов в элементе select в CSS

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

4

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

Раньше я экспериментировал с элементами выбора, и без переопределения функциональности с помощью JavaScript, я не думаю, что это возможно в Chrome. Используете ли вы плагин или пишете свой собственный код, только CSS не годится для Chrome/Safari, и, как вы сказали, Firefox лучше справляется с этим.

0

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

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

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

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

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

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

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

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

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

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

&двоеточие; Элемент HTML Option — HTML: Язык гипертекстовой разметки

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