Кастомизируем select на чистом css
Как-то вечером я убивал время, читая статьи в интернете, и наткнулся на вот этот хабропост пользователя Cyapa, где расписано, как кастомизировать select на чистом css. В процессе просмотра данного решения нашел несколько весьма неудобных моментов, которые постарался исправить в своем решении этой задачи. Итак, приступим.
Пока смотрел код того поста, заметил, что автор сделал селект, который невозможно закрыть при клике вне его, а также невозможность открыть селект при клике на название элемента, если оно уже выбрано.
В своем варианте кастомизации я, так же как и предыдущий автор, использовал label, input[type=«radio»] и мощь css-селекторов. Так как сам селект средствами css полностью кастомизировать нереально, я имитировал поведение селекта.
Для начала, я накидал вот такую разметку:
При просмотре данного кода у вас мог возникнуть вопрос: «Почему у всех инпутов одинаковое имя?». Отвечу сразу: это сделано для того, чтобы наш селект адекватно вел себя(открывался и закрывался тогда, когда нужно). Но обо всем по порядку. Давайте перейдем к самой интересной, на мой взгляд, части — 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
Вот она — самая интересная часть, в которой надо осмыслить как смена выбора инпута (все инпуты с типом радио имеют одинаковое имя => мы можем выбрать только один из них) влияет на наш селект. Еще одной особенностью этого варианта является возможность отключить селект, используя атрибут disabled на #select.
Готовый пример вы можете найти здесь.
Вот, собственно, и все. Парочка минусов предыдущего автора пофикшены, так что это решение, полагаю, на данный момент можно считать идеальным css-вариантом селекта. Надеюсь, мое решение кому-нибудь пригодится.
Стилизация select CSS для отображения в разных браузерах
В этой статье мы расскажем о том как реализуется стилизация select CSS для отображения в разных браузерах с примерами, фрагментами кода и скриншотами.
Для тестирования на Windows 8.1 использовались следующие браузеры:
• Firefox 35 ;
• Internet Explorer 11 ;
• Google Chrome 40 ;
• Windows Safari 5.1 .
Список свойств CSS , которые поддерживаются браузерами:
| CSS | Firefox | Chrome | IE11 |
| Background | ДА | ДА | ДА |
| Border | ДА | ДА | ДА |
| box-shadow | ДА | ДА | ДА |
| Color | ДА | ДА | ДА |
| Font | ДА | ДА | ДА |
| Height | ДА | ДА | ДА |
| margin | ДА | ДА | ДА |
| opacity | ДА | ДА | ДА |
| padding | ДА | ДА | ДА |
| position | ДА | ДА | ДА |
| width | ДА | ДА | ДА |
Были протестированы следующие сценарии стилизации SELECT CSS :
- Элемент SELECT без применения CSS ;
- Элемент SELECT с применением свойств CSS padding и height или line-height ;
- Элемент SELECT с применением свойств CSS border , background и text-color ;
- Элемент SELECT с применением различных правил CSS .
Элемент SELECT без применения CSS
SELECT без применения CSS выглядит одинаково во всех перечисленных браузерах. За исключением того, что Internet Explorer для SELECT CSS оформления по умолчанию использует черную рамку, и стили стрелки выпадающего списка определяются по-разному.
// HTML
CSS putting line-height in select box
The following tutorial shows you how to use CSS to do «CSS putting line-height in select box».
CSS Style
The CSS style to do «CSS putting line-height in select box» is
.select_box < font-size:12px; padding:14px; > HTML Body
body> select >"select_box"> option value="" disabled style="display: none;">Categories option>10 option>25 option>50 option>100 option>all The following iframe shows the result. You can view the full source code and open it in another tab.
html> head> meta name="viewport" content="width=device-width, initial-scale=1"> style id="compiled-css" type="text/css"> .select_boxfont-size:12px;padding:14px;> body> select >"select_box"> option value="" disabled="disabled" style="display: none;">Categories option>10 option>25 option>50 option>100 option>all Related
- CSS Pure CSS way to show/hide content based on option select
- CSS Put text in line with top of select box
- CSS Put text in line with top of select box (Demo 2)
- CSS putting line-height in select box
- CSS Radio button to display Text box if selected and disappear if other option is selected
- CSS Radio buttons selecting multiple options
- CSS Radio buttons selecting multiple options (Demo 2)
demo2s.com | Email: | Demo Source and Support. All rights reserved.