Раскрывающийся дизайн с CSS3

  1. Основная структура
  2. Удалить стили браузера
  3. Расстояния и прозрачный фон
  4. Добавьте тени, обострите углы, исправьте ошибки
  5. Одна деталь: стрела!

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

CSS3 теперь делает нашу работу немного проще и дает нам возможность влиять на внешний вид полей формы без необходимости JavaScript. В этом коротком уроке мы хотим использовать его и сделать визуально привлекательный блок выбора. Это позволяет получить прозрачный фон, тени и закругленные углы. Кроме того, присуждается отдельная стрелка, которую мы получаем из шрифта значка OpenSource FontAwesome удалить и снова fontello интеграции.

Основная структура

Мы сохраняем HTML как можно более простым и помещаем простой <select> на зеленый фон. Единственное изменение, которое мы делаем в начале, - это оболочка с классом CSS «select-wrapper», которую мы оборачиваем вокруг элемента и которой мы даем ширину 200 пикселей. Это понадобится нам позже, если мы интегрируем стрелку.

<div class = "select-wrapper"> <select> <option> Option 1 </ option> <option> Option 2 </ option> <option> Option 3 </ option> </ select> </ div> .select -wrapper {ширина: 200px; }

Без стиля <select> выглядит довольно мрачно (слева), наша цель - шаблон (справа), в котором элемент гармонично сочетается с фоном:

Удалить стили браузера

На первом этапе мы сводим стандартное форматирование браузеров к минимуму. Мы осуществляем это через свойство CSS3 «внешний вид», которое мы устанавливаем равным «нет». Здесь нужно отметить, что мы назначаем префиксы для браузеров Chrome, Safari и Firefox. Мы также снимаем привлекательную раму.

выберите {-moz-внешний вид: нет; внешний вид: нет; внешний вид: нет; граница: нет; }

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

Почти во всех? Это верно! Internet Explorer мешает нам и показывает стандартную стрелку. Поэтому мы пишем IE дополнительное приглашение со следующим фрагментом кода:

select :: - ms-expand {display: none; }

Но теперь это может начаться с фактического моделирования.

Расстояния и прозрачный фон

Далее, мы позаботимся о том, чтобы придать элементу немного внутреннего пространства. Мы можем легко работать с шириной, высотой и отступами. Поскольку мы уже установили ширину родительской оболочки, мы расширяем <select> до 100%. Когда следует отметить, что Firefox создает минимальное расстояние от дома, мы не можем сбросить. Это не должно нас беспокоить.

Поскольку мы не можем использовать свойство CSS «opacity» в <select>, мы используем прозрачный пиксель в формате PNG для фона, который мы повторяем в направлении x и y. Если вы хотите сохранить работу по открытию графической программы для пикселя, вы также можете просто сгенерировать ее здесь: www.1x1px.me ,

С помощью следующего CSS мы очень хорошо подошли к нашему шаблону:

выберите {/ * ... * / ширина: 100%; высота: 40 пикселей; отступ слева: 10 пикселей; background: url (fff-0-2.png) repeat; цвет: #fff; семейство шрифтов: «Open Sans», без засечек; размер шрифта: 16 пикселей; }

Добавьте тени, обострите углы, исправьте ошибки

Свойства "border-radius" и "box-shadow" дают нашему элементу необходимые завершающие штрихи. Прозрачного черного цвета должно хватить как тень:

выберите {/ * ... * / box-shadow: 2px 2px 5px 1px rgba (0,0,0,0.3); радиус границы: 3 пикселя; }

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

выберите {/ * ... * / контур: нет; }

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

выберите опцию {цвет: # 666; }

И последнее, но не менее важное: мы снова чувствуем, что интернет-обозреватель оказался на грани, и что-то нашли: после того, как мы отметили опцию, <select> обесцветился. Но мы также можем повлиять на это:

выберите: focus :: - ms-value {background-color: прозрачный; }

Для оптимального «ощущения нажатия кнопки» нам нужна лишь небольшая деталь: мы меняем указатель мыши при наведении курсора!

выберите {/ * ... * / курсор: указатель; }

Одна деталь: стрела!

Почти наш выпадающий список теперь может передаваться как кнопка, но мы не допустим этого и вернем выпадающий вид, поместив стрелку из fontello над <select>. Мы быстро понимаем, что это невозможно на самом <select>. Итак, теперь в игру вступает наш фантик, который мы позиционируем относительно. Таким образом, мы можем просто вставить стрелку как: before элемент и поместить его абсолютно помещенным в обертку. Это может выглядеть примерно так в таблице стилей:

.select-wrapper {/ * ... * / position: относительный; } .select-wrapper :: before {font-family: fontello; содержание: "\ f107"; размер шрифта: 20 пикселей; положение: абсолютное; справа: 15 пикселей; верх: 10 пикселей; цвет: #fff; }

Интеграция через Fontello мы предшествовали в одном вклад уже обсуждалось.

Маленькая деталь все еще отсутствует. Хотя стрелка отображается в правильном положении, но, конечно, она также должна быть щелкающей и открывать <select>. Мы справились с этим с помощью хитрости и позволили кликабельному <select>, так сказать, «просвечивать»:

.select-wrapper :: before {/ * ... * / pointer-events: none; }

Готово! Мы снова проверяем <select> во всех браузерах и на всех устройствах и полностью удовлетворены результатом.

Мы снова проверяем <select> во всех браузерах и на всех устройствах и полностью удовлетворены результатом

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