Как изменить размер select css

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

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

Ниже будет показано, что и как можно сделать с внешним видом select с помощью обычного CSS, оставаясь в рамках требований WCAG к доступности (читаемость, контрастность, пользовательские настройки), а также вариантов написания: справа-налево и слева-направо.

Основные стили

Сперва сбросим параметры текста.

select {
  font: inherit;
  letter-spacing: inherit;
  word-spacing: inherit;
}

font

Свойство font наследует все стили от контейнера(ов). Иногда при сбросе CSS указывают размер шрифта font-size, но в этом нет необходимости. font будет наследовать стили всех своих параметров: font-size, font-family, font-style, font-variant, font-weight, font-stretch и font-height (если установлено). Ещё он добавляет высоту строки line-height. В-общем, шрифт будет адаптироваться к изменениям, которые касаются всей страницы, либо с помощью надстроек, либо через настройки браузера/системы.

letter-spacing

Если пользователь (или автор) изменяет параметры текста, чтобы повлиять на расстояние между буквами, это не будет касаться предустановленных для поля значений. Наследование параметров font не повлияет на межбуквенное расстояние, поэтому нужно явно указать необходимость наследования значения letter-spacing: inherit. Это поможет соответствовать требованиям WCAG 2.1 Success Criterion 1.4.12: Text Spacing

word-spacing

Аналогично межбуквенному letter-spacing, значение word-spacing для управления интервалами между словами не будет наследоваться, если это не объявить явным образом. WCAG 1.4.12 применяется и для расстояния между словами.

line-height

Обратите внимание, что в коде не устанавливается высота строки line-height. Это значение нормально наследуется вместе с остальными параметрами шрифта в свойстве font. Если обнаружится, что это не так (например, из-за явной установки высоты строки ) можно добавить line-height: inherit, чтобы соответствовать WCAG 1.4.12.

Пример

В этом примере демонстрируется применение этого минимального набора стилей.

See this code Простой Select on x.xhtml.ru.

Как настроить стрелку для select

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

select {
  font: inherit;
  letter-spacing: inherit;
  word-spacing: inherit;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}

select:not([multiple]) {
  padding-right: 1.2em;
  background-repeat: no-repeat;
  background-position: calc(100% - 0.25em) 0.35em;
  background-size: 0.85em auto;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cpath d='M70.3 13.8L40 66.3 9.7 13.8z' fill='%23000'%3E%3C/path%3E%3C/svg%3E");
}

/* скроет иконку стрелки в IE */
select::-ms-expand {
  display: none;
}

Здесь удаляются стили, устанавливаемые браузером, освобождается место для графической стрелки, а затем новая картинка стрелки вставляется в качестве фона. Это должно применяться только в том случае, если select обычный и предназначен для выбора одиночного значения, а не нескольких (multiple).

See this code Select с измененной стрелкой on x.xhtml.ru.

Этот пример демонстрирует замену стрелки по умолчанию элементу select.

Продолжение настройки select

Стоит обратить внимание, что интервалы у текста не очень хороши. Потенциально можно сделать их более привлекательными, удобными и доступными для пользователей с помощью всего нескольких дополнительных стилей. Например, можно настроить border и padding. Эти два свойства расширяют базовые стили, описанные выше, чтобы сделать текстовые поля более удобными.

select {
  font: inherit;
  letter-spacing: inherit;
  word-spacing: inherit;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  /* рамка и отступы */
  border: 0.1em solid;
  padding: 0 0.2em;
}

border

Изменение значений CSS-свойств для рамки поля сопряжено с риском. Согласно WCAG (SC 1.4.11: Non-text Contrast), если для элемента формы не вносить изменений в стили по умолчанию, то это никак не повлияет на контрастность. Тем не менее, с помощью border: 0.1em solid будет установлена толщина рамки на основе размера шрифта. Теперь рамка поля выбора будет масштабироваться вместе с текстом. Заодно она становится толще, чем используется по умолчанию в большинстве браузеров.

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

padding

Трогать padding для select не обязательно. Однако, содержимое поля будет немного легче читать и использовать, если немного его настроить. Это поможет сделать отступы в select ближе к аналогичным в textarea и input, если их тоже предстоит настраивать.

Стилизация состояний select

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

Отключено disabled

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

Сфокусировано focused

WCAG SC 2.4.7 не рекомендует здесь ничего делать, согласно Technique G149, потому что браузер добавляет свой собственный стиль для фокуса. Тем не менее, можно сделать его ещё более очевидным, например, использовать синий контур с хорошим контрастом к белому и добавить тень:

select:focus {
  outline: 0.15em solid #00f;
  box-shadow: 0 0 0.2em #00f;
}

Только для чтения readonly

Нативный элемент <select> не поддерживает атрибут readonly.

Обязательное поле required

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

select[required] {
  border-left-width: 0.3em;
}

Поле с ошибками

Одной красной рамки тут будет недостаточно (из-за сбоев WCAG по контрасту и только по цвету), а массивные тени могут испачкать всю страницу. Слишком много усилий по привлечению внимания к ошибкам создают шум, требующий от пользователей больших усилий для их устранения. Вместо этого можно добавить небольшой индикатор в углу поля. Градиент, образующий красную метку, устанавливает белый цвет фона поля. Обратите внимание, здесь в первый раз полю select явно задаётся цвет фона.

Здесь не будет использоваться селектор :invalid, потому что он может негативно влиять на нативное представление ошибок в браузере. Вместо этого можно использовать наличие-отсутствие aria-invalid, не просто переключая его с true на false, а добавляя или удаляя этот атрибут. Поскольку стрелка, как было решено выше, также является фоновым изображением, её здесь придётся повторно установить, если речь об обычном select без множественного выбора (multiple).

select[aria-invalid] {
  background: linear-gradient(
    135deg,
    rgba(255, 0, 0, 1) 0,
    rgba(255, 0, 0, 1) 0.4em,
    rgba(255, 255, 255, 0) 0.4em
  );
}

select[aria-invalid]:not([multiple]) {
  background-repeat: no-repeat, no-repeat;
  background-position: 0 0, calc(100% - 0.25em) 0.35em;
  background-size: 0.85em auto;
  background-image: linear-gradient(
      135deg,
      rgba(255, 0, 0, 1) 0,
      rgba(255, 0, 0, 1) 0.4em,
      rgba(255, 255, 255, 0) 0.4em
    ),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cpath d='M70.3 13.8L40 66.3 9.7 13.8z' fill='%23000'%3E%3C/path%3E%3C/svg%3E");
}

Стили для интернационализации

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

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

*[dir="rtl"] select:not([multiple]) {
  padding-right: 0.2em;
  padding-left: 1.2em;
  background-position: 0.25em 0.35em;
}

*[dir="rtl"] select[required] {
  border-left-width: 0.1em;
  border-right-width: 0.3em;
}

*[dir="rtl"] select[aria-invalid] {
  background: linear-gradient(
    225deg,
    rgba(255, 0, 0, 1) 0,
    rgba(255, 0, 0, 1) 0.4em,
    rgba(255, 255, 255, 0) 0.4em
  );
}

*[dir="rtl"] select[aria-invalid]:not([multiple]) {
  background: linear-gradient(
    225deg,
    rgba(255, 0, 0, 1) 0,
    rgba(255, 0, 0, 1) 0.4em,
    rgba(255, 255, 255, 0) 0.4em
  ),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cpath d='M70.3 13.8L40 66.3 9.7 13.8z' fill='%23000'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: auto, 0.85em auto;
  background-position: 0 0, 0.25em 0.35em;
}

Стили режима высокой контрастности Windows

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

Стиль подсветки контура outline здесь хорошо адаптируется. Переключение в disabled работает, как и должно по умолчанию. Стили border не затрагивают цвет и не повлияют работу с любой контрастностью.

Единственное, что может теряться — это индикация ошибки. При таком небольшом количестве цветов (система WHCM) может понадобиться акцент на другом визуальном индикаторе ошибок. Например, использовать label, чтобы четко указать на ошибки.

Стили для печати

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

Стили для тёмного режима (dark mode)

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

Следует наследовать цвет текста и фон (или сделать его прозрачным) и выбрать цвет рамки, который по-прежнему соответствует требованиям контрастности. Стили состояния при фокусировке тоже нуждаются в достаточном контрасте. Метка для состояния при ошибке зависит от фонового градиента к белому, поэтому нужно будет полностью переопределить стили ошибок, в том числе для RTL. Отключенные (disabled) поля также потребуют некоторой работы, так как явно заданы цвета границ и текста.

Заключение

Пример стилизованного select в разных состояниях с сохранением WCAG-доступности.

See this code Select Menus on x.xhtml.ru.

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

Похожие публикации, посвященные стилизации HTML-элемента select: Select Like It’s 2019 и Custom Select Styles with Pure CSS немного отличаются подходами, но заслуживают не меньшего внимания. Может быть эти варианты даже лучше соответствуют вашим целям и требованиям.

Under-Engineered Select Menus.

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Pure CSS Styled Select</title>

  <style>

    body {

      background-color: #a4ecae;

      font-family: 'Source Sans Pro', sans-serif;

    }

    .demo {

      margin: 100px auto;

    }

    .dropdown-container {

      width: 250px;

      margin: 100px auto;

      position: relative;

    }

    select {

      width: 100%;

      height: 50px;

      font-size: 100%;

      font-weight: bold;

      cursor: pointer;

      border-radius: 0;

      background-color: #2bd325;

      border: none;

      border-bottom: 2px solid #37c40c;

      color: white;

      appearance: none;

      padding: 10px;

      padding-right: 38px;

      -webkit-appearance: none;

      -moz-appearance: none;

      transition: color 0.3s ease, background-color 0.3s ease,

                   border-bottom-color 0.3s ease;

    }

    /* For IE <= 11 */

    select::-ms-expand {

      display: none; 

    }

    .select-icon {

      position: absolute;

      top: 4px;

      right: 4px;

      width: 30px;

      height: 36px;

      pointer-events: none;

      border: 2px solid #70d82a;

      padding-left: 5px;

      transition: background-color 0.3s ease, border-color 0.3s ease;

    }

    .select-icon svg.icon {

      transition: fill 0.3s ease;

      fill: white;

    }

    select:hover,

    select:focus {

      color: #5ac02b;

      background-color: white;

      border-bottom-color: #141313;

    }

    select:hover ~ .select-icon,

    select:focus ~ .select-icon {

      background-color: white;

      border-color: #3dd13db6;

    }

    select:hover ~ .select-icon svg.icon,

    select:focus ~ .select-icon svg.icon {

      fill: #67c02b;

    }

  </style>

</head>

<body>

  <div class="demo">

    <div class="dropdown-container">

      <select class="slct">

        <option value="1">GFG</option>

        <option value="2">OS

          </option>

        <option value="3">DBMS</option>

        <option value="4">

          Data Structure

        </option>

        </select>

      <div class="select-icon">

        <svg focusable="false" viewBox="0 0 104 128" 

             width="25" height="35" class="icon">

          <path 

               d="m2e1 95a9 9 0 0 1 -9 9 9 9 0 0 1 -9 -9 9 9

                  0 0 1 9 -9 9 9 0 0 1 9 9zm0-3e1a9 9 0 0 1 

                  -9 9 9 9 0 0 1 -9 -9 9 9 0 0 1 9 -9 9 9 0 0 

                  1 9 9zm0-3e1a9 9 0 0 1 -9 9 9 9 0 0 1 -9 -9 9 

                  9 0 0 1 9 -9 9 9 0 0 1 9 9zm14 

                  55h68v1e1h-68zm0-3e1h68v1e1h-68zm0-3e1h68v1e1h-68z">

          </path>

        </svg>

      </div>

    </div>

  </div>

</body>

Время прочтения
4 мин

Просмотры 88K

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

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

В своем варианте кастомизации я, так же как и предыдущий автор, использовал label, input[type=«radio»] и мощь css-селекторов. Так как сам селект средствами css полностью кастомизировать нереально, я имитировал поведение селекта.

Для начала, я накидал вот такую разметку:

<!-- Лейбел, при клике на который открывается селект -->
<label for="select" class="select">
    <!-- Этот инпут отвечает за закрытие селекта при клике за его пределами. Также этот инпут является стандартным значением нашего селекта -->
    <input type="radio" name="list" value="not_changed" id="bg" checked />
    <!-- Этот инпут является переключателем селекта в состояние "открыт" -->
    <input type="radio" name="list" value="not_changed" id="select">
    <!-- Этот лейбел используется для создания подложки, клик по которой приводит к закрытию селекта -->
    <label class="bg" for="bg"></label>
    <!-- Этот див - список параметров селекта, где #text - то, что выводится, когда ничего не выбрано -->
    <div class="items">
      <!-- Инпут, при клике на который происходит выбор параметра и сворачивание селекта -->
      <input type="radio" name="list" value="first_value" id="list[0]">
      <!-- Название параметра -->
      <label for="list[0]">First option</label>
      <!-- Инпут, при клике на который происходит выбор параметра и сворачивание селекта[1] -->
      <input type="radio" name="list" value="second_value" id="list[1]">
      <!-- Инпут, при клике на который происходит выбор параметра и сворачивание селекта[1] -->
      <label for="list[1]">Second loooooong option</label>
      <!-- Текст селекта по умолчанию. Выводится тогда, когда ничего не выбрано -->
      <span id="text">Select something...</span>
    </div>
</label>

При просмотре данного кода у вас мог возникнуть вопрос: «Почему у всех инпутов одинаковое имя?». Отвечу сразу: это сделано для того, чтобы наш селект адекватно вел себя(открывался и закрывался тогда, когда нужно). Но обо всем по порядку. Давайте перейдем к самой интересной, на мой взгляд, части — css.

/* скрываем все инпуты, чтобы все выглядело красиво */
input
{
  display: none;
}

/* стилизуем стандартный текст лейбела(желательно смотреть этот стиль после .items) */

#text
{
  position: absolute;
  display: block;
  top: 0;
  padding-left: 10px;
}

/* Задаем параметры нашего селекта - ширину, высоту и line-height(для центрирования текста по вертикали;этот парметр меньше ширины на 4px, т.к. в нашем блоке есть border размером в 2px со всех сторон) */

.select
{
  display: inline-block;
  width: 160px;
  height: 34px;
  line-height: 30px;
  position: relative;
}

/* Это наша стрелочка, показывающая, что селект можно раскрыть */

.select:before
{
  content: ">";
  display: inline-block;
  background: white;
  position: absolute;
  right: -5px;
  top: 2px;
  z-index: 2;
  width: 30px;
  height: 26px;
  text-align: center;
  line-height: 26px;
  border: 2px solid #ddd;
  transform: rotate(90deg);
  cursor: pointer;
}

/* Если ничего не выбрано, то наш изначальный текст черного цвета, как и должно быть */

.select input[name="list"]:not(:checked) ~ #text
{
  color: black;
  background: white;
}

/* Если же что-то выбрано, то наш текст становится невидимым и встает сверху выбранного параметра, чтобы при клике на него можно было заного открыть селект, что не было реализовано прошлым автором */

.select input[name="list"]:checked ~ #text
{
  background: transparent;
  color: transparent;
  z-index: 2;
}

/* Стилизация выключенного селекта */

#select:disabled ~ .items #text
{
  background: #eee;
}

/* Стилизация блока с опциями. min-height сделана для фикса высоты при абсолютном позиционировании, overflow же сделан для фиксированной высоты(см. ниже) */

.items
{
  display: block;
  min-height: 30px;
  position: absolute;
  border: 2px solid #ddd;
  overflow: hidden;
  width: 160px;
  cursor: pointer;
}

/* Если наш селект закрыт, то он имеет высоту 30px(сделано для того, чтобы слишком большие надписи не растягивали его в высоту)  */

#select:not(:checked) ~ .items
{
  height: 30px;
}

/* Все лейбелы(названия опций) изначально скрыты */

.items label
{
  border-top: 2px solid #ddd;
  display: none;
  padding-left: 10px;
  background: white;
}

/* Тут много объяснять не надо - просто выделение при наведении */

.items label:hover
{
  background: #eee;
  cursor: pointer;
}

/* Опять же фикс из-за абсолютного позиционирования */

#select:checked ~ .items
{
  padding-top: 30px;
}

/* Если наш селект открыт, то надо сделать все опции видимыми */

#select:checked ~ .items label
{
  display: block;
}

/* Если какая-либо опция была выбрана, то сделать ее видимой(при выборе селект автоматически закроется) */

.items input:checked + label
{
  display: block!important;
  border: none;
  background: white;
}

/* При открытии селекта создать подложку во весь экран, при клике на которую селект закроется, а значение останется пустым. background сделан для наглядности */

#select:checked ~ .bg
{
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 0;
  background: rgba(0,0,0,0.4);
}

Вот она — самая интересная часть, в которой надо осмыслить как смена выбора инпута (все инпуты с типом радио имеют одинаковое имя => мы можем выбрать только один из них) влияет на наш селект. Еще одной особенностью этого варианта является возможность отключить селект, используя атрибут disabled на #select.

Готовый пример вы можете найти здесь.

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

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

Для определения доступных вариантов выбора используется тег <option>, вложенный в тег <select>.

По умолчанию первый пункт в списке отображается как выбранный. Для изменения предопределенного варианта используется атрибут selected.

Для объединения нескольких вариантов в одну группу используется тег <optgroup>. Содержимое тега <optgroup> выглядит как заголовок жирного начертания.

Внешний вид списка зависит от использования атрибута size, который устанавливает высоту списка. Ширина списка зависит от длины текста в теге <option>. Ширину можно также задать с помощью CSS стилей.

Если необходимо отправлять данные на сервер, либо обращаться к списку через скрипты, то тег <select> необходимо поместить внутрь формы (тег <form>).

Содержимое элемента заключается между открывающим (<select>) и закрывающим (</select>) тегами. Закрывающий тег обязателен

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок окна веб-страницы</title>
  </head>
  <body>
    <form action="action_form.php" target="_top">
      <select>
        <option value="books">Книги</option>
        <option value="html">HTML</option>
        <option value="css">CSS</option>
        <option value="php">PHP</option>
        <option value="js">JavaScript</option>
      </select>
    </form>
  </body>
</html>

Результат

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок окна веб-страницы</title>
  </head>
  <body>
    <select>
      <optgroup label="Книги">
        <option value="html">HTML</option>
        <option value="css">CSS</option>
      </optgroup>
      <optgroup label="Сниппеты">
        <option value="git">Git</option>
        <option value="java">Java</option>
      </optgroup>
    </select>
  </body>
</html>

В этом примере мы использовали тег <optgroup> для сбора опций в группе.

Результат

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок окна веб-страницы</title>
  </head>
  <body>
    <p>Аэропорт вылета:</p>
    <form action="action_form.php" target="_top">
      <input type = "text" list = "airports" name="airports"> 
      <datalist id = "airports">
        <option value = "Санкт-Петербург">
        <option value = "Краснодар">
        <option value = "Москва">
        <option value = "Новосибирск">
      </datalist>
      <input type = "submit" value = "подтвердить">
    </form>
  </body>
</html>

Результат

В этом примере мы использовали тег <form>, так как нам необходимо отправить данные на сервер.

Тег <select> поддерживает также глобальные атрибуты и атрибуты событий.