Разное

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

14.06.2021

Содержание

Стилизация select на CSS

Вы здесь: Главная — CSS — CSS3 — Стилизация select на CSS

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

HTML разметка для select

Тег select поместим внутри тега div с классом select. Создадим две опции, между которыми и должен происходить выбор.

<div>
    <select>
        <option value="Лимон">Лимон</option>
        <option value="Банан">Банан</option>
        <option value="Яблоко">Яблоко</option>
    </select>
</div>

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


CSS для select

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

.select {
    position: relative;
}

Стилизуем тег select. С помощью свойства appearance, убираем стандартные стрелочки у элементов формы. Затем добавляем для него вендорные префиксы для браузеров Chrome и Safari нужен –webkit, а для Firefox -moz.

.select select {
    display: block;
    width: 100%; /* от ширины блока div */
    padding: .75rem 2.5rem .75rem 1rem;/* отступы от текста до рамки */
    background: none; /* убираем фон */
    border: 1px solid #ccc; /* рамка */
    border-radius: 3px;/* скругление полей формы */
    -webkit-appearance: none;/* Chrome */
    -moz-appearance: none;/* Firefox */
    appearance: none;/* убираем дефолнтные стрелочки */
    font-family: inherit;/* наследует от родителя */
    font-size: 1rem;
    color: #444;
}

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

after, применив разные свойства border. При клике внутри поля, показывается выпадающий список, за исключением при клике по самой стрелочке. Свойство pointer-events: none; отменяет стандартное поведение при клике по элементам, прописав которое, теперь при клике по стрелочке, так же появится, выпадающий список.

.select:after {
    content: "";
    display: block;
    border-style: solid;
    border-width: 6px 5px 0 5px;
    border-color: #000 transparent transparent transparent;
    pointer-events: none;
    position: absolute;
    top: 50%;
    right: 1rem;
    z-index: 1;
    margin-top: -3px;
}

Как вставить дизайнерскую стрелочку?

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

.select:after {
    content: " url(...) ";
}

или вставить картинку в виде фона без повтора.


.select select {
    background: url(...) no-repeat;
}

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

Стилизация select option

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

Заключение

Однако лучшим решением на 2019 год – это конвертировать иконку в SVG формат и вставить фоном. Такой вариант, гарантирует качественное изображение на любых разрешениях и разных масштабах.

В видеокурсе «Вёрстка сайта с нуля 2. 0″, я показываю на живом примере, как верстать сайт по макету.

  • Создано 22.05.2019 10:15:50
  • Михаил Русаков
Предыдущая статья Следующая статья

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

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.

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

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

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

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

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

  1. Кнопка:
    <a href=»https://myrusakov.
    ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

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

  2. Текстовая ссылка:
    <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):
    [URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

CSS оформление select — используем свойство appearance

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

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

С другой стороны такой подход позволяет:

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

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

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

Итак, как уже было сказано, для оформления select достаточно CSS3 свойств.

Основное свойство, которое позволит изменить внешний вид селекта, это appearance. Оно заставляет какой-либо элемент принять вид того, что вы захотите, например, можно заставить див стать кнопкой. Однако в рамках нашей задачи интересно значение

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

.select {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none !important;
}

Как видно, убрать стрелку не составило труда, теперь остаётся добавить несколько тривиальных CSS-свойств вроде рамки, шрифта и прочего. Здесь конечно же можно добавить и скругление уголков, и тени и прочее, всё как нарисовал дизайнер в макете. Главное выпадающий список остаётся нативным.

.select {
    background: transparent;
    display: block;
    width: 100%;
    border: 1px solid #a7a7a7;
    color: #32353a;
    font-family: 16/Arial, sans-serif;
    font-size: 16px;
    line-height: 1.4;
    font-weight: normal;
    padding: 7px 10px 7px 10px;
    height: 36px;
    vertical-align: top;
    outline: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none !important;
}

Теперь остаётся добавить фоном стрелку или какую-либо другую иконку. Использовать фон будем, поскольку псевдоэлементы вроде before и after для селекта работать не будут. Для лучшего отображения сайтов на различных устройствах с разным плотностью пикселей, на различных масштабах и т. п. принято использовать SVG иконки. Поэтому с помощью онлайн URL-encoder для SVG сконвертируем иконку в data URI. При этом важно помнить, что тег SVG должен иметь атрибут xmlns="http://www.w3.org/2000/svg".

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8">
    <path fill="#000" fill-rule="evenodd" d="M8,0L4.141,6.993,0.012,0.156Z"/>
</svg>

Получится следующий результат.

%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M8,0L4.141,6.993,0.012,0.156Z'/%3E%3C/svg%3E%0A

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

По ссылке ниже приведён рассмотренный в статье пример стилизации select через CSS свойство appearance.

Понравилась статья? — Ставь лайк!

HTML и CSS с примерами кода

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

Конечный вид зависит от использования атрибута size, который устанавливает высоту списка. Ширина списка определяется самым широким текстом, указанным в элементе <option>, а также может изменяться с помощью стилей. Каждый пункт создаётся с помощью элемента <option>, который должен быть вложен в контейнер <select>. Если планируется отправлять данные списка на сервер, то требуется поместить <select> внутрь формы. Это также необходимо, когда к данным списка идёт обращение через скрипты.

Формы

Синтаксис

<select>
  <option>Пункт 1</option>
  <option>Пункт 2</option>
</select>

Закрывающий тег обязателен.

Атрибуты

autofocus
Устанавливает, что список получает фокус после загрузки страницы.
disabled
Блокирует доступ и изменение элемента.
form
Связывает список с формой.
multiple
Позволяет одновременно выбирать сразу несколько элементов списка.
name
Имя элемента для отправки на сервер или обращения через скрипты.
required
Список обязателен для выбора перед отправкой формы.
size
Количество отображаемых строк списка.

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

autofocus

Атрибут autofocus устанавливает, что список получает фокус после загрузки страницы, при этом список становится доступным для выбора пунктов, например, с помощью клавиатуры.

Синтаксис

<select autofocus>
  ...
</select>

Значения

Нет.

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

По умолчанию этот атрибут выключен.

disabled

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

Синтаксис

<select disabled>
  ...
</select>

Значения

Нет.

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

По умолчанию этот атрибут выключен.

form

Связывает список с формой по её идентификатору. Такая связь необходима в случае, когда список располагается за пределами <form>.

Синтаксис

<select form="<идентификатор>">
  ...
</select>

Значения

Идентификатор формы (значение атрибута id элемента <form>).

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

Нет.

multiple

Наличие атрибута multiple сообщает браузеру отображать содержимое элемента <select> как список множественного выбора. Конечный вид списка зависит от используемого атрибута size и браузера.

Для выбора нескольких значений списка применяются клавиши Ctrl и Shift совместно с курсором мыши.

Чтобы на сервер отправлялся массив данных, значение атрибута name следует писать с квадратными скобками — hero[], к примеру.

Синтаксис

<select multiple>
  ...
</select>

Значения

Нет.

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

По умолчанию этот атрибут выключен.

name

Определяет уникальное имя элемента <select>. Как правило, это имя используется для доступа к данным через скрипты или для получения выбранного значения списка на сервере.

Синтаксис

<select name="<имя>">
  ...
</select>

Значения

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

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

Нет.

required

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

Синтаксис

<select required>
  ...
</select>

Значения

Нет.

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

По умолчанию атрибут required выключен.

size

Устанавливает высоту списка. Если значение атрибута size равно 1, то список превращается в раскрывающийся. При добавлении атрибута multiple к элементу <select> при size="1" список отображается как «крутилка». Во всех остальных случаях получается список с одним или множественным выбором.

Синтаксис

<select size="<число>">
  ...
</select>

Значения

Любое целое положительное число.

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

Зависит от атрибута multiple. Если он присутствует, то размер списка равен количеству элементов. Когда атрибута multiple нет, то по умолчанию значение атрибута size равно 1.

Значения ARIA role

  • <select> (без атрибута multiple и без атрибута size со значением больше 1) — role=combobox
  • <select> (с атрибутом multiple или с атрибутом size со значением больше 1) — role=listbox

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

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>SELECT</title>
  </head>
  <body>
    <form action="select1. php" method="post">
      <p>
        <select size="3" multiple name="hero[]">
          <option disabled>Выберите героя</option>
          <option value="Чебурашка">Чебурашка</option>
          <option selected value="Крокодил Гена">
            Крокодил Гена
          </option>
          <option value="Шапокляк">Шапокляк</option>
          <option value="Крыса Лариса">Крыса Лариса</option>
        </select>
      </p>
      <p><input type="submit" value="Отправить" /></p>
    </form>
  </body>
</html>

Ссылки

Изменить стиль Select с помощью jQuery. Пишем свой select-список, используя jQuery и CSS Оформление select jquery

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

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

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

В двух словах: он умеет практически всё, что умеет стандартный селект, при этом отлично стилизируется и подстраивается под особенности реализации селектов разных браузеров. Плагин полностью копирует внешний вид родного селекта Mac OS X, но его без проблем можно стилизировать через css.

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

Вот так в открытом:

Чем же он лучше остальных?

Объем: 11KB

Достоинства:

  • работает во всех браузерах (IE6+, FF, Opera, Chrome, Safari), в том числе в мобильных
  • автоматически подстраивает ширину
  • открывается всегда на видимую часть страницы (так называемое «умное позиционирование»), как в горизонтальном, так и в вертикальном положении
  • позволяет задавать максимальную высоту выпадающего списка
  • позволяет группировать опции (optgroup)
  • полностью управляется с клавиатуры (в т. ч. реагирует на переход Tab»ом, PgUp, PgDown, Home, End)
  • имеет подбор по первым буквам (не только по одной, но и по последующим)
  • поддерживает скролл колёсиком мышки
  • вставляется инлайново (inline-block)
  • замечательно работает с огромными списками (1000+ элементов)
  • оставляет стандартный селект при отключенном javascript
  • имеет отличный API
Недостатки:
  • не позволяет выделять сразу несколько пунктов (multiselect)
  • не стилизирует скроллбар выпадающего списка (т.к. слишком сильно влияет на скорость работы)
  • не бегает за пивом

Мобильные браузеры

Плагин стилизирует само поле, но при нажатии вызывает родное поведение браузера. Протестировано на iOS (Safari) и Android (2.3 native, Firefox):

В Opera mini остаются стандартные селекты, во избежание перезагрузки страницы при открытии списка. В Opera mobile работает так же, как и в настольной версии.

Здравствуйте, хабраюзеры и просто читающие. Сравнительно недавно задался вопросом, как применить стили к тегу select. Всем же хочется, чтобы стилизация формы соответствовала дизайну сайта, а пока что еще не все можно описать чистым CSS. В данной статье мы рассмотрим простенький пример написания своего select-списка, используя CSS и библиотеку языка JavaScript — jQuery. Думаю, особенно новичкам будет любопытен данный материал. Конечно, лучше было бы лучше написать на нативном JS, но всем известно, что строк кода было бы больше, и вряд ли он был бы понятнее.

Честно говоря, прежде чем взяться за создание очередного велосипеда, я пробовал найти подобное решение, но кроме эффектных div-оберток для тега select ничего не нашёл. И я подумал, что будет неплохо написать что-то простенькое и нужное. Ну, что ж, начнём!

В нашем кружке лепки из пластилина участвуют три файла:

  • selectbox.html
  • selectbox.css
  • selectbox.js
Рассмотрим их по очереди. Сначала обратим внимание на самое что ни наесть простое в этом примере — верстка списка или файл selectbox. html :

selectbox.html

Месяц

Создаем пользовательские элементы select

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

Какие стили использовать, зависит, конечно, от того, что вы хотите чтобы увидел ваш пользователь. При замене элемента select на пользовательскую структуру очень важно сохранить новый элемент доступным. Добавление лэйбла и особые стили при попадания фокуса — это лишь некоторые из вещей, которые вы должны иметь в виду. Узнайте больше о той или иной форме доступности в HTML: HTML Techniques for Web Content Accessibility Guidelines 1.0 от the W3C.

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

В демо мы используем иконки из следующих наборов значков: Ionicons, Font Awesome, Linecons и Maki.

SVG-флаги, используемые в одном из примеров, из Flag Webicons Set от Sean Herron.

Круглые иконки, используемые в одном из примеров, взяты из Ballicons 2 set от Pixel Buddha.

Итак, давайте взглянем на наш обычный элемент select. Он обычно выглядит следующим образом:

<select>
    <option value=»» disabled selected>Choose your option</option>
    <option value=»1″>Option 1</option>
    <option value=»2″>Option 2</option>
    <option value=»3″>Option 3</option>
</select>

… Мы же преобразуем его в эту структуру:

<div>
    <span>Выберите Ваш вариант</span>
    <div>
        <ul>
            <li data-option data-value=»1″><span>Вариант 1</span></li>
            <li data-option data-value=»2″><span>Вариант 2</span></li>
            <li data-option data-value=»3″><span>Вариант 3</span></li>
        </ul>
    </div>
    <select>
        <option value=»» disabled selected>Выберите Ваш вариант</option>
        <option value=»1″>Вариант 1</option>
        <option value=»2″>Вариант 2</option>
        <option value=»3″>Вариант 3</option>
    </select>
</div>

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

По желанию, мы можем определить data-link и data-class в опциях элемента select. Опция link позволит фактически открыть гиперссылку при нажатии на элемент списка. Когда пользовательские классы необходимы на элементов списка, то атрибут data-class класс может быть использован.

Доступны следующие опции:

newTab : true,
// открывает ссылки на новом табе (когда data-link используется в настройках)

stickyPlaceholder : true,
// когда открывается элемент select, показывается placeholder по-умолчанию
 
onChange : function( val ) { return false; }
//функция обратного вызова при изменении значения

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

Основные стили для наших примеров находятся в cs-select.css. Ниже представлен в качестве примера css-код для примера Border:

@font-face {
    font-family: ‘icomoon’;
    src:url(‘. ./fonts/icomoon/icomoon.eot?-rdnm34′);
    src:url(‘../fonts/icomoon/icomoon.eot?#iefix-rdnm34′) format(’embedded-opentype’),
        url(‘../fonts/icomoon/icomoon.woff?-rdnm34’) format(‘woff’),
        url(‘../fonts/icomoon/icomoon.ttf?-rdnm34’) format(‘truetype’),
        url(‘../fonts/icomoon/icomoon.svg?-rdnm34#icomoon’) format(‘svg’);
    font-weight: normal;
    font-style: normal;
}
div.cs-skin-border {
    background: transparent;
    font-size: 2em;
    font-weight: 700;
    max-width: 600px;
}
@media screen and (max-width: 30em) {
    .cs-skin-border { font-size: 1em; }
}
.cs-skin-border > span {
    border: 5px solid #000;
    border-color: inherit;
    transition: background 0.2s, border-color 0.2s;
}
.cs-skin-border > span::after,
.cs-skin-border .cs-selected span::after {
    font-family: ‘icomoon’;
    content: ‘\e000’;
}
.cs-skin-border ul span::after {
    content: »;
    opacity: 0;
}
. cs-skin-border .cs-selected span::after {
    content: ‘\e00e’;
    color: #ddd9c9;
    font-size: 1.5em;
    opacity: 1;
    transition: opacity 0.2s;
}
.cs-skin-border.cs-active > span {
    background: #fff;
    border-color: #fff;
    color: #2980b9;
}
.cs-skin-border .cs-options {
    color: #2980b9;
    font-size: 0.75em;
    opacity: 0;
    transition: opacity 0.2s, visibility 0s 0.2s;
}
.cs-skin-border.cs-active .cs-options {
    opacity: 1;
    transition: opacity 0.2s;
}
.cs-skin-border ul span {
    padding: 1em 2em;
    backface-visibility: hidden;
}
.cs-skin-border .cs-options li span:hover,
.cs-skin-border li.cs-focus span {
    background: #f5f3ec;
}

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

Надеемся, они вам понравятся!

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

Скачать исходные файлы

Перевод статьи с  http://tympanus.net/codrops/


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

Проблема стилизации элементов форм | Frontender Magazine

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

Год за годом не достаточно детализированная спецификация заставляла веб- разработчиков экспериментировать в попытках привести представление таких элементов, как input, select, fieldset, legend и textarea в разных браузерах к «общему знаменателю». В этой статье мы рассмотрим некоторые приемы CSS, используемые веб-разработчиками для стандартизации визуального представления элементов форм.

Тесты Роджера Йоханссона

Сначала в 2004, а затем и в 2007 году, Роджер Йоханссон (Roger Johansson) создал исчерпывающий набор тестов для проверки применения CSS-стилей к элементам форм. Результатом выполнения этих тестов, которые вы можете найти в его статье «К вопросу о стилизации элементов форм с помощью CSS», стал неутешительный вывод, который Йоханссон выразил следующими словами:

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

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

Модель по умолчанию

Спецификация CSS 2.1 указывает в предлагаемой таблице стилей по умолчанию для HTML4, что элементы форм, такие как textarea, input и select, являются строчно-блочными:

textarea, input, select {
	display: inline-block;
}

В свою очередь, элементы form и fieldset являются блочными:

fieldset, form {
	display: block;
}

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

  • Строчно-блочные элементы могут быть стилизованы с использованием строчной модели. Он позволяет использовать такие CSS-свойства, как line-height и vertical-align, для управления высотой блока и его вертикальным выравниванием. Кроме этого, для указания внешних и внутренних отступов блока могут быть применены свойства margin и padding. Строчно-блочные элементы поддерживают width и height, так как используют блочную модель форматирования.

  • Блочные элементы могут быть стилизованы с использованием хорошо всем известного блочной модели. Тем не менее, проблемы возникают с элементами fieldset и legend, так как legend полностью зависит от стилей, применяемых браузером по умолчанию.

Как веб-разработчики решают эти проблемы?

Размеры

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

input, select {
	width: 120px;
	height: 32px;
}

Разработчики пытались решить эту проблему, превратив эти элементы в блочные:

input, select {
	width: 120px;
	height: 32px;
	display: block;
}

Сработало только с textarea. Стандартное решения этой проблемы заключается в использовании вместо height свойств font-size и padding.

Элементы форм не наследуют гарнитуру и кегль шрифта, поэтому первым делом необходимо указать их:

input, select {
	width: 120px;
	font: 1em Arial, sans-serif;
}

Пример на jsFiddle: «CSS: указание размеров элементов форм».

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

input, select {
	width: 120px;
	font: 1em Arial, sans-serif;
	padding: 3px 6px;
}

Для элементов input и textarea в таблицах стилей браузеров определен border. Нормализуем его:

input[type="text"],
input[type="password"],
textarea {
	border: 1px solid #ccc;
}

Элементам input с типом button и submit браузеры добавляют дополнительный отступ. Распространенная практика их нормализации:

input[type="button"],
input[type="submit"] {
	padding: 2px;
}

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

input[type="button"], input[type="submit"],
input[type="reset"], input[type="file"]::-webkit-file-upload-button,
button {
	-webkit-box-align: center;
	text-align: center;
	cursor: default;
	color: buttontext;
	padding: 2px 6px 3px;
	border: 2px outset buttonface;
	border-image: initial;
	background-color: buttonface;
	box-sizing: border-box;
}
input[type="button"], input[type="submit"],
input[type="reset"] {
	-webkit-appearance: push-button;
	white-space: pre;
}

padding используется также и для элементов fieldset и legend, но приводит к другим результатам:

  • Установка значения свойства padding для элемента fieldset в 0 по умолчанию сбросит отступ элемента legend в некоторых браузерах (но не в IE).
  • Установка значения свойства padding для элемента legend в 0 приведет к его схлопыванию.

Для select, и для input c типами checkbox и radio стоит использовать только:

  • font-family,
  • font-size,
  • width (для select),
  • padding.

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

Выравнивание

Элементы форм можно выровнять по горизонтали и по вертикали. Они могут быть расположены на одной линии или как группа блоков друг под другом. Для выравнивания их на одной линии вы можете использовать один из двух подходов:

  1. Использовать float,
  2. Использовать для некоторых элементов строчно-блочную модель.

При использовании float элементы автоматически становятся блочными. Это означает, что эти элементы форм теперь подчиняются девяти правилам float-элементов.

Элементы форм можно выравнивать по вертикали и по горизонтали.

При использовании float основной проблемой является правильное выравнивания по вертикали относительно текущей строки. Обычно это делают используя margin или padding:

input, select {
	width: 120px;
	float: left;
	margin-top: 0.4em;
}

Этот подход работает, когда вам не нужно задавать выравнивание блоков относительно текста, например, содержимого label. В случае, если это необходимо, вы можете использовать относительное позиционирование, padding и margin для элементов, содержащих только текст:

label {
	float: left;
	padding-top: 0.4em;
	width: 5em;
	margin-right: 1em;
}

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

input[type="submit"] {
	float: left;
	width: 90px;
	position: relative;
	top: 0.4em;
}

Еще прием с относительным позиционированием можно использовать для input с типами checkbox и radio. Относительное позиционирование можно использовать даже для нормализации отступа слева у элемента legend внутри элемента fieldset. Единственное отличие состоит в необходимости использования свойства left вместо top.

При использовании строчной и строчно-блочной модели для вертикального выравнивания элементов вы можете использовать свойство vertical-align:

label, input[type="text"] {
	vertical-align: middle;
	margin-right: 1em;
}

Бывает удобно использовать это свойство вместе с line-height. Важно отметить, что применять это свойство необходимо к родительскому элементу. Если вы примените это свойство непосредственно к элементам формы, это скажется при расчете их высоты:

.form-row {
	line-height: 1.4;
}

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

.form-row {
	line-height: 1.8;
	height: 1.8em;
}

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

Странные особенности элементов выбора файлов

<input type="file"/> — это особый случай. Исходя из соображений безопасности, этот тип элементов всегда должен быть видимым и узнаваемым в браузере. Это означает, что браузеры преднамеренно игнорируют некоторые стили (например, стили, относящиеся к видимости элемента) и стремятся применять представление, описанное их собственными таблицами стилей.

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

Веб-разработчики, тем не менее, быстро нашли способ преодолеть эти ограничения. Сначала они поместили поле ввода в контейнер:

<form action="" method="post" enctype="multipart/form-data">
	<div>
		<input type="file" name="upload"/>
	</div>
</form>

Затем они скрыли элемент input с помощью свойства opacity и применили стили к контейнеру:

.upload {
	width: 157px;
	height: 57px;
	background: url(upload.png) no-repeat;
	overflow: hidden;
}

.upload input {
	display: block !important;
	width: 157px !important;
	height: 57px !important;
	opacity: 0 !important;
	overflow: hidden!important;
}

Обратите внимание на !important. Это предпочтительный способ для переопределения стилей браузера по умолчанию.

Пример на jsFiddle: «CSS: стилизация поля типа „файл“».

Заключение

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

Нестандартный SELECT, изменение их внешнего вида и оформления

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

Стили CSS довольно скудно позволяют настраивать внешний вид SELECT’ов: им можно задать цвет бэкграунда, но при этом нельзя в качестве бэкграунда задать картинку. О чём думали, когда это делали?

Изменить оформление злосчастного выкидного списка можно и помогает в этом нам jQuery и другие подобные библиотеки. Плагины для этих библиотек подменяют стандартный селект на выкидной список, сделанный из классических тегов <div>, <p>, <ul> и так далее, а с ними CSS нам позволяет работать на все 100%.

Тем не менее не всё так гладко, как хотелось бы. Очень много рыская в интернете в поисках подобных скриптов, я натыкался на различные вариации, обладающие различными недостатками, из-за чего проблему замены SELECT’ов я считаю довольно актуальной. Я не буду приводить всё, что я нашёл, остановлюсь на нескольких.

Изменённые SELECT’ы без полосы прокрутки

Это наиболее распространённые селекты, недостаток которых указан в названии. Зачастую они прекрасно работают, ничего более и не надо, однако если список превышает 15-20 элементов, то страница растягивается очень далеко, а у селекта нет никаких полос прокрутки. Проблема? При больших списках не просто проблема, а катастрофа.

К примеру, в ссылках чуть ниже показаны пару таких плагинов.

 

SELECT’ы, заточенные под старинные версии библиотек

Оставляю пункт без комментариев и примеров, так как кому нужны примеры для jQuery 1.0.1 и подобных.

Адекватные оформления SELECT’ов

Самый адекватный скрипт, представленный по ссылкам с примерами чуть ниже, оказался находкой. Всё хорошо, всё красиво, есть даже очень приятный плюс, заключающийся в том, что есть возможность автозаполнения — прописываешь название (как в input’е) и он тебе выберет и покажет доступные варианты.

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

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

 

Напоследок

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

 

[UPD] Пока писал пост, плагин с сайта xiper.net взяли и обновили, буквально вчера, уже успели выявить несколько недочётов. У него теперь есть своё название — cuSel. Потестить плагин ещё не успел, но, думается, нововведения придутся по вкусу. Ссылки на плагин я чуть выше изменил — под кнопкой «Пример 1» пример необновлённого плагина, а под «Пример 2» — пример с обновлённым плагином.

AJAX, CSS, jQuery

Понравилась статья или журнал? Подписывайся на продолжение!

Похожие записи:

пользовательских стилей выбора с чистым CSS

Это выпуск №20 из серии, посвященной современным решениям CSS для проблем, которые я решал в течение последних 14 с лишним лет работы фронтенд-разработчиком .

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

Несколько свойств и методов, которые будет использовать наше решение:

  • clip-path для создания настраиваемой стрелки раскрывающегося списка
    • Макет сетки
  • CSS для выравнивания собственного выделения и стрелки
  • пользовательских переменных CSS для гибкого моделирования
  • em единиц для относительного размера

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

Распространенные проблемы с Native Selects #

Как и все типы полей формы, в Firefox, Chrome и Safari:

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

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

Примечание: раскрывающийся список по-прежнему не стилизован, поэтому после открытия .

Привет! Зарегистрируйтесь на мой семинар по CSS в июле на Smashing Conference: Level-Up With Modern CSS

Метка не является частью нашего упражнения по стилизации, но она включена в качестве общего требования, особенно с атрибутом для , имеющим значение id на .

С clip-path мы получаем четкую, масштабируемую «графику» стрелки, которая ощущается как SVG, но с преимуществами возможности использовать нашу настраиваемую переменную и содержаться в стиле по сравнению с разметкой HTML.

Чтобы создать стрелку, мы определим ее как псевдоэлемент :: after .

  .select :: after {
 content: ""; 
 ширина: 0,8 мм; 
 высота: 0,5 мм; 
 background-color: var (- стрелка выбора); 
 clip-path: многоугольник (100% 0%, 0 0%, 50% 100%); 
}

Синтаксис clip-path немного странный, и, поскольку он не является предметом внимания данной статьи, я рекомендую следующие ресурсы:

  • Колби Фэйок объясняет синтаксис на примере в этом видео о яйцеголовых
  • Clippy - это онлайн-инструмент, который позволяет вам выбирать форму и настраивать точки, динамически генерируя clip-path CSS

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

Мы решим эту проблему, обновив наш .select , чтобы использовать макет сетки CSS.

 . Выбрать {
 display: grid; 
}

Это позволяет стрелке появляться, существенно расширяя ее отображаемое значение, подобное «блоку».

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

Чтобы исправить выравнивание, мы воспользуемся моим любимым приемом CSS-сетки (старая шляпа для вас, если вы читали здесь несколько статей!).

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

Сначала мы определим нашу область, а затем определим, что выбирает и :: after оба используют его. Имя привязано к элементу, для которого он создан, и мы упростим его, назвав его "select":

  .select {
 grid-template-sizes: "выбрать"; 
} 
 select, 
 .select: после {
 grid-area: select; 
}

Что дает нам перекрытие стрелки над собственным выбором из-за контекста стекирования через исходный порядок:

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

 .выберите {
 align-items: center; 
} 
 .select: после {
 justify-self: end; 
}

Та-да!

: фокус Состояние #

Ах да - помните, как мы удалили контур ? Нам нужно устранить пропущенное состояние : focus , чтобы его не отбросить.

В ближайшее время мы могли бы использовать свойство под названием : focus-within , но на данный момент все же лучше включить для него полифилл.

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

К сожалению, это означает, что нам нужно добавить еще один элемент в DOM.

После собственного элемента select в качестве последнего дочернего элемента в пределах . Выберите , добавьте:

Почему после? Поскольку, поскольку это чистое решение CSS, размещение его после собственного выбора означает, что мы можем изменить его, когда select сфокусирован, используя соседний родственный селектор - + .

Это позволяет нам создать следующее правило:

  выберите: focus +.фокус {положение 
: абсолютное; 
 сверху: -1px; 
 слева: -1px; 
 справа: -1px; 
 bottom: -1px; 
 граница: сплошная 2px var (- select-focus); 
 border-radius: наследовать; 
}

Вам может быть интересно, почему мы вернулись к позиции : абсолютному после того, как изучили предыдущий взлом grid-area .

Причина в том, чтобы избежать пересчета корректировок на основе заполнения. Если вы попробуете его самостоятельно, вы увидите, что даже установка ширины и высоты на 100% по-прежнему заставляет его сидеть внутри отступа.

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

Но нам нужно сделать еще одно добавление к .select , чтобы убедиться, что он относительно нашего выбора по ... ну, position: relative .

  .select {
 позиция: относительная;

А вот и все вместе, как показано в Chrome:

Множественный выбор #

Selects имеет второй вариант, который позволяет пользователю выбирать более одного варианта.С точки зрения HTML это просто означает добавление атрибута multiple , но мы также добавим класс для помощи в создании настроек стиля под названием select - multiple :

.

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

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

  .select: not (.select - multiple) :: после

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

  выберите [несколько] {
 отступ справа: 0; 
}

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

  выберите [несколько] вариант {
 пробел: нормальный; 
}

При желании мы можем установить высоту для выбора, чтобы обеспечить более надежное кроссбраузерное поведение.В ходе тестирования я узнал, что Chrome и Firefox будут отображать частичный вариант, но Safari полностью скроет параметр, который не может быть полностью отображен.

Высота должна быть установлена ​​непосредственно в собственном выборе. Учитывая наши другие стили, значение 6rem сможет показать 3 варианта:

  выберите [несколько] {
 высота: 6 бэр; 
}

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

Состояние : selected из опций довольно легко настраивается в Chrome, отчасти в Firefox и совсем не в Safari. См. Демонстрацию CodePen для раздела, который можно раскомментировать для предварительного просмотра.

: отключено стилей #

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

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

  .select - отключено {
 курсор: запрещено; 
 цвет фона: #eee; 
 background-image: linear-gradient (вверх, #ddd, #eee 33%); 
}

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

Это приводит к следующим выступлениям:

Демо №

Вы можете протестировать это самостоятельно, но вот предварительный просмотр полного решения (слева) в Firefox, Chrome и Safari:

Стефани Эклс (@ 5t3ph)

CSS-only Custom Styled Select. Элемент HTMLselect, стилизованный напрямую… | by B. Chen

Элемент select уже давно трудно согласованно стилизовать во всех браузерах.Мы использовали JavaScript для создания элемента управления, подобного select, из различных элементов. Например, мы использовали неупорядоченные списки ul или div для создания настраиваемых компонентов выбора.

Оказывается, обходные пути JavaScript сложно поддерживать из-за следующих проблем:

  • 💣 Проблемы с доступностью
  • 💣 Плохо для программ чтения с экрана
  • 💣 Трудно использовать на мобильных устройствах, особенно когда список опций длинный
  • 💣 Не работает, когда JavaScript отключен
  • Может быть, не подходит для SEO
  • Намного больше кода для поддержки
  • Повышенный риск появления ошибки

Быстрый пример

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

Chrome default unstyled select

Ниже тот же select элемент, стилизованный непосредственно с использованием только CSS.

Чистый CSS-стиль select

Разметка HTML

Давайте просто воспользуемся выбранным по умолчанию HTML (без каких-либо дополнительных тегов html):

CSS

Стрелка раскрывающегося списка и граница по умолчанию являются частью стандартного «внешнего вида» элемента формы.Итак, вам нужно убедиться, что appearance: none; устанавливается в CSS стиля во всех браузерах.

  внешний вид : нет; 
  -webkit-appearance : нет; 
  -moz-appearance : none; / * Для IE <= 11 * / 
 select :: - ms-expand {
  display : none; 
}

Обратите внимание, что существует специальный псевдокласс для IE ≤ 11.

А вот полный CSS, управляющий внешним видом элемента select

 select {
 width: 100%; 
 высота: 50 пикселей; 
 размер шрифта: 100%; 
 font-weight: жирный; 
 курсор: указатель; 
 border-radius: 0; 
 цвет фона: # c0392b; 
 граница: отсутствует; 
 border-bottom: 2px solid # 962d22; 
 цвет: белый; 
 отступ: 10 пикселей; 
 Внешний вид: нет; 
 -вебкит-внешний вид: нет; 
 -моз-внешний вид: нет; 
 отступ: 10 пикселей; 
} / * Для IE <= 11 * / 
 select :: - ms-expand {
 display: none; 
}

К настоящему моменту вы должны увидеть:

Базовый вид CSS-стиля select

Селектор : hover используется для выбора элементов при наведении указателя мыши на элемент.Селектор : focus используется для выбора элемента, имеющего фокус. Давайте стилизуем эффект наведения и фокуса с эффектом перехода 0.3s easy на color , background-color и border-bottom-color .

 выберите {
 ширина: 100%; 
 высота: 50 пикселей; 
 размер шрифта: 100%; 
 font-weight: жирный; 
 курсор: указатель; 
 border-radius: 0; 
 цвет фона: # c0392b; 
 граница: отсутствует; 
 border-bottom: 2px solid # 962d22; 
 цвет: белый; 
 отступ: 10 пикселей; 
 padding-right: 38px; 
 Внешний вид: нет; 
 -вебкит-внешний вид: нет; 
 -моз-внешний вид: нет; 
 / * Добавление эффекта перехода * / 
 transition: color 0.3 с легкостью, с легкостью для фонового цвета 0,3 с, с легкостью для окраски нижнего края - 0,3 с; 
} / * Для IE <= 11 * / 
 select :: - ms-expand {
 display: none; 
} select: hover, 
 select: focus {
 color: # c0392b; 
 цвет фона: белый; 
 цвет нижней границы: #DCDCDC; 
}

Теперь вы должны увидеть такой эффект:

Добавление эффекта наведения и фокусировки

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

Разметка HTML

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

CSS

Вот стиль CSS для иконки.Обратите внимание, что мы используем переход background-color и border-color .

 .select-icon {
 позиция: абсолютная; 
 сверху: 4 пикселя; 
 справа: 4 пикселя; 
 ширина: 30 пикселей; 
 высота: 36 пикселей; 
 события-указателя: нет; 
 граница: сплошная 2px # 962d22; 
 padding-left: 5 пикселей; 
: переход: фоновый цвет - 0,3 с, граница - 0,3; 
} 
 .select-icon svg.icon {
 переход: заливка с легкостью 0,3 с; 
 заливка: белая; 
}

Вот CSS-эффект наведения и фокуса для значка.Обратите внимание: селектор CSS ~ используется для выбора .select-icon , которому предшествует select 

 select: hover ~ .select-icon, 
 select: focus ~ .select-icon {
 background-color : белый; 
 цвет границы: #DCDCDC; 
} 
 select: hover ~ .select-icon svg.icon, 
 select: focus ~ .select-icon svg.icon {
 fill: # c0392b; 
}

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

Завершенный пользовательский выбор

И на этом все.Спасибо за чтение, вот полный код:

10 бесплатных фрагментов окна выбора CSS и JavaScript

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

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

Я собрал коллекцию из 10 моих лучших стилей ручной работы.Они не выпускаются как плагины, а вместо этого полагаются на шаблоны для настройки JavaScript и CSS. Но все они так же просты в настройке и даже переделке для ваших собственных целей.

Панель инструментов веб-дизайнера

Неограниченное количество скачиваний: более 1 000 000 веб-шаблонов, тем, плагинов, ресурсов дизайна и многого другого!

1. Пользовательское меню выбора

Начало коллекции - это настраиваемые стили меню выбора Уоллеса Эрика.

Он использует как CSS для рестайлинга, так и JavaScript для настройки UX меню.Они ведут себя немного иначе, чем стандартные элементы HTML, и я думаю, что их немного удобнее использовать.

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

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

2. Простой выбор

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

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

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

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

Вот первый вариант Второй вариант

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

Сначала нам нужно окружить наш элемент поля выбора контейнером div:

Вот первый вариант Второй вариант

 
 Затем нам нужно добавить немного CSS, чтобы убедиться, что элементы поля выбора имеют определенный стиль: 

 
 .styled-select select {
   фон: прозрачный;
   ширина: 268 пикселей;
   отступ: 5 пикселей;
   размер шрифта: 16 пикселей;
   высота строки: 1;
   граница: 0;
   радиус границы: 0;
   height: 34px;
   -webkit-appearance: нет;
   }
 
 Нам нужно убедиться, что наше поле выбора действительно охватывает шире, чем окружающий контейнер div, чтобы стрелка раскрывающегося списка по умолчанию исчезла.
 Это новая стрелка раскрывающегося списка, которую я хочу использовать:
 Наш контейнер div должен быть оформлен так, чтобы новая стрелка появилась там, где мы хотим:
 .styled-select {
   ширина: 240 пикселей;
   height: 34px;
   переполнение: скрыто;
   фон: url (new_arrow.png) no-repeat right #ddd;
   граница: 1px solid #ccc;
   }
 
 Наше поле выбора теперь должно выглядеть так:
 Вот первый вариант Второй вариант
 Знание этого небольшого обходного пути значительно упростит настройку вашего поля выбора именно так, как вы хотите, используя только CSS.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *