Существует ли способ стилизации выпадающего списка <select>
только с помощью CSS?
Мне нужно стилизовать форму <select>
настолько, насколько это возможно, без использования JavaScript. Какие свойства я могу использовать для этого в CSS?
Этот код должен быть совместим со всеми основными браузерами:
Я знаю, что могу сделать это с помощью JavaScript: Пример.
И я'не говорю о простой стилизации. Я хочу знать, что лучшее мы можем сделать только с помощью CSS.
Я нашел похожие вопросы на Stack Overflow.
И этот на Doctype.com.
Вот три решения:
Решение #1 - appearance: none - с Internet Explorer 10 - 11 workaround (Demo)
--
Чтобы скрыть стрелку по умолчанию, установите appearance: none
для элемента select, затем добавьте свою собственную стрелку с background-image
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none; /* Remove default arrow */
background-image: url(...); /* Add custom arrow */
}
Поддержка браузеров:
appearance: none
имеет очень хорошую браузерную поддержку (caniuse) - за исключением Internet Explorer 11 (и более поздних версий) и Firefox 34 (и более поздних версий).
Мы можем улучшить эту технику и добавить поддержку Internet Explorer 10 и Internet Explorer 11, добавив
select::-ms-expand {
display: none; /* Hide the default arrow in Internet Explorer 10 and Internet Explorer 11 */
}
Если речь идет об Internet Explorer 9, у нас нет возможности удалить стрелку по умолчанию (что означает, что у нас теперь будет две стрелки), но мы можем использовать забавный селектор Internet Explorer 9.
Чтобы, по крайней мере, отменить нашу пользовательскую стрелку, оставив нетронутой стрелку выбора по умолчанию.
/* Target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
select {
background-image:none\9;
padding: 5px\9;
}
}
select {
margin: 50px;
width: 150px;
padding: 5px 35px 5px 5px;
font-size: 16px;
border: 1px solid #CCC;
height: 34px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: url(http://www.stackoverflow.com/favicon.ico) 96% / 15% no-repeat #EEE;
}
/* CAUTION: Internet Explorer hackery ahead */
select::-ms-expand {
display: none; /* Remove default arrow in Internet Explorer 10 and 11 */
}
/* Target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
select {
background: none\9;
padding: 5px\9;
}
}
<select>
<option>Apples</option>
<option selected>Pineapples</option>
<option>Chocklate</option>
<option>Pancakes</option>
</select>
Это решение простое и имеет хорошую поддержку браузера - в общем, его должно быть достаточно.
Если необходима поддержка браузеров Internet Explorer 9 (и более поздних) и Firefox 34 (и более поздних), то продолжайте читать...
Решение #2 Усечение элемента select, чтобы скрыть стрелку по умолчанию ([demo][9])
--
Оберните элемент select
в div с фиксированной шириной и overflow:hidden
.
Затем дайте элементу select
ширину примерно на 20 пикселей больше, чем div.
В результате выпадающая стрелка элемента select
по умолчанию будет скрыта (благодаря overflow:hidden
контейнера), и вы сможете разместить любое фоновое изображение по своему усмотрению в правой части div.
Преимущество этого подхода в том, что он кроссбраузерный (Internet Explorer 8 и выше, WebKit и Gecko). Однако недостатком этого подхода является то, что выпадающий список опций выпирает с правой стороны (на 20 пикселей, которые мы скрыли... потому что элементы опций занимают ширину элемента select).
[Следует отметить, однако, что если пользовательский элемент select необходим только для мобильных устройств - тогда вышеупомянутая проблема не применима - из-за того, как каждый телефон изначально открывает элемент select. Так что для мобильных устройств это может быть лучшим решением].
.styled select {
background: transparent;
width: 150px;
font-size: 16px;
border: 1px solid #CCC;
height: 34px;
}
.styled {
margin: 50px;
width: 120px;
height: 34px;
border: 1px solid #111;
border-radius: 3px;
overflow: hidden;
background: url(http://www.stackoverflow.com/favicon.ico) 96% / 20% no-repeat #EEE;
}
<div class="styled">
<select>
<option>Pineapples</option>
<option selected>Apples</option>
<option>Chocklate</option>
<option>Pancakes</option>
</select>
</div>
Если пользовательская стрелка необходима в Firefox - до версии 35 - но вам не нужно поддерживать старые версии Internet Explorer - тогда продолжайте читать...
Решение #3 - Используйте свойство pointer-events
([demo][14])
--
Идея заключается в том, чтобы наложить элемент на родную выпадающую стрелку (чтобы создать нашу пользовательскую стрелку) и затем запретить события указателя на ней.
Преимущества: Он хорошо работает в WebKit и Gecko. Это также хорошо выглядит (нет торчащих элементов option
).
Недостаток: Internet Explorer (Internet Explorer 10 и ниже) не поддерживает pointer-events
, что означает, что вы не сможете нажать на пользовательскую стрелку. Кроме того, еще одним (очевидным) недостатком этого метода является то, что вы не сможете нацелить на новое изображение стрелки эффект наведения или ручной курсор, потому что мы только что отключили события указателя на них!
Однако с помощью этого метода вы можете использовать Modernizer или условные комментарии, чтобы заставить Internet Explorer вернуться к стандартной встроенной стрелке.
NB: Поскольку Internet Explorer 10 больше не поддерживает условные комментарии
: Если вы хотите использовать этот подход, вам, вероятно, следует использовать Modernizr. Однако, все еще возможно исключить CSS с указателями событий из Internet Explorer 10 с помощью CSS-хака, описанного здесь.
.notIE {
position: relative;
display: inline-block;
}
select {
display: inline-block;
height: 30px;
width: 150px;
outline: none;
color: #74646E;
border: 1px solid #C8BFC4;
border-radius: 4px;
box-shadow: inset 1px 1px 2px #DDD8DC;
background: #FFF;
}
/* Select arrow styling */
.notIE .fancyArrow {
width: 23px;
height: 28px;
position: absolute;
display: inline-block;
top: 1px;
right: 3px;
background: url(http://www.stackoverflow.com/favicon.ico) right / 90% no-repeat #FFF;
pointer-events: none;
}
/*target Internet Explorer 9 and Internet Explorer 10:*/
@media screen and (min-width: 0\0) {
.notIE .fancyArrow {
display: none;
}
}
<!--[if !IE]> -->
<div class="notIE">
<!-- <![endif]-->
<span class="fancyArrow"></span>
<select>
<option>Apples</option>
<option selected>Pineapples</option>
<option>Chocklate</option>
<option>Pancakes</option>
</select>
<!--[if !IE]> -->
</div>
<!-- <![endif]-->
Это возможно, но, к сожалению, в основном в браузерах на базе WebKit в том объеме, который требуется нам, разработчикам. Вот пример CSS-стилей, собранных из панели опций Chrome через встроенный инспектор инструментов разработчика, улучшенных до соответствия поддерживаемым в настоящее время свойствам CSS в большинстве современных браузеров:
select {
-webkit-appearance: button;
-moz-appearance: button;
-webkit-user-select: none;
-moz-user-select: none;
-webkit-padding-end: 20px;
-moz-padding-end: 20px;
-webkit-padding-start: 2px;
-moz-padding-start: 2px;
background-color: #F07575; /* Fallback color if gradients are not supported */
background-image: url(../images/select-arrow.png), -webkit-linear-gradient(top, #E5E5E5, #F4F4F4); /* For Chrome and Safari */
background-image: url(../images/select-arrow.png), -moz-linear-gradient(top, #E5E5E5, #F4F4F4); /* For old Firefox (3.6 to 15) */
background-image: url(../images/select-arrow.png), -ms-linear-gradient(top, #E5E5E5, #F4F4F4); /* For pre-releases of Internet Explorer 10*/
background-image: url(../images/select-arrow.png), -o-linear-gradient(top, #E5E5E5, #F4F4F4); /* For old Opera (11.1 to 12.0) */
background-image: url(../images/select-arrow.png), linear-gradient(to bottom, #E5E5E5, #F4F4F4); /* Standard syntax; must be last */
background-position: center right;
background-repeat: no-repeat;
border: 1px solid #AAA;
border-radius: 2px;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
color: #555;
font-size: inherit;
margin: 0;
overflow: hidden;
padding-top: 2px;
padding-bottom: 2px;
text-overflow: ellipsis;
white-space: nowrap;
}
Когда вы запустите этот код на любой странице в браузере на базе WebKit, он должен изменить внешний вид поля выбора, убрать стандартную OS-стрелку и добавить PNG-стрелку, добавить интервал до и после метки, практически все, что вы захотите.
Наиболее важной частью является свойство appearance
, которое изменяет поведение элемента.
Оно отлично работает почти во всех браузерах на базе WebKit, включая мобильные, хотя Gecko, похоже, не поддерживает appearance
так же хорошо, как WebKit.
Элемент select и его выпадающий элемент *сложны для стилизации.
атрибуты стиля для элемента select Криса Хейлмана подтверждают слова Райана Доэри, сказанные в комментарии к первому ответу:
"Элемент select является частью операционной системы, а не хрома браузера. Поэтому он очень ненадежен для стилизации, и не всегда имеет смысл пытаться его использовать. в любом случае."
Наибольшее несоответствие я'вэ заметил, когда стиль выберите меню составляет сафари и Гугл Хром рендеринг (Firefox является полностью настраиваемый через CSS). После некоторых поисков через неясных глубинах Интернета я наткнулся на такую, которая почти полностью устраняет мои опасения с webkit:
Safari и Google Chrome не исправить:
select {
-webkit-appearance: none;
}
Это, однако, снять стрелку. Вы можете добавить стрелку с помощью бизнес-див с фоном, отрицательная разница или абсолютно позиционированных на Выбрать выпадающее.
Подробная информация и другие переменные в CSS свойство: -в WebKit-внешний вид*.
Теги <select>
можно стилизовать с помощью CSS, как и любой другой элемент HTML на HTML-странице, отображаемой в браузере. Ниже приведен пример (слишком простой), который размещает элемент select на странице и выделяет текст опций синим цветом.
Пример HTML-файла (selectExample.html):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Select Styling</title>
<link href="selectExample.css" rel="stylesheet">
</head>
<body>
<select id="styledSelect" class="blueText">
<option value="apple">Apple</option>
<option value="orange">Orange</option>
<option value="cherry">Cherry</option>
</select>
</body>
</html>
Пример CSS файла (selectExample.css):
/* All select elements on page */
select {
position: relative;
}
/* Style by class. Effects the text of the contained options. */
.blueText {
color: #0000FF;
}
/* Style by id. Effects position of the select drop down. */
#styledSelect {
left: 100px;
}
У меня был этот точный проблема, кроме того, что я не мог'т использовать изображения и не был ограничен в браузере поддержку. Это должно быть «вперед» и при удаче начать работать везде в конце концов.
Он использует многослойный повернут фоновых слоев для «вырезать» в стрелку, как псевдо-элементы не't работа для выберите элемент.
Редактировать: в этой обновленной версии я использую переменные CSS и крошечная система тематизации.
в
в :корень { --радиус: 2 пикселя; --baseFg: dimgray; --baseBg: белый; --accentFg: #006fc2; --accentBg: bae1ff#; }
.theme-pink {
--radius: 2em;
--baseFg: #c70062;
--baseBg: #ffe3f1;
--accentFg: #c70062;
--accentBg: #ffaad4;
}
.theme-construction {
--radius: 0;
--baseFg: white;
--baseBg: black;
--accentFg: black;
--accentBg: orange;
}
select {
font: 400 12px/1.3 sans-serif;
-webkit-appearance: none;
appearance: none;
color: var(--baseFg);
border: 1px solid var(--baseFg);
line-height: 1;
outline: 0;
padding: 0.65em 2.5em 0.55em 0.75em;
border-radius: var(--radius);
background-color: var(--baseBg);
background-image: linear-gradient(var(--baseFg), var(--baseFg)),
linear-gradient(-135deg, transparent 50%, var(--accentBg) 50%),
linear-gradient(-225deg, transparent 50%, var(--accentBg) 50%),
linear-gradient(var(--accentBg) 42%, var(--accentFg) 42%);
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
background-size: 1px 100%, 20px 22px, 20px 22px, 20px 100%;
background-position: right 20px center, right bottom, right bottom, right bottom;
}
select:hover {
background-image: linear-gradient(var(--accentFg), var(--accentFg)),
linear-gradient(-135deg, transparent 50%, var(--accentFg) 50%),
linear-gradient(-225deg, transparent 50%, var(--accentFg) 50%),
linear-gradient(var(--accentFg) 42%, var(--accentBg) 42%);
}
select:active {
background-image: linear-gradient(var(--accentFg), var(--accentFg)),
linear-gradient(-135deg, transparent 50%, var(--accentFg) 50%),
linear-gradient(-225deg, transparent 50%, var(--accentFg) 50%),
linear-gradient(var(--accentFg) 42%, var(--accentBg) 42%);
color: var(--accentBg);
border-color: var(--accentFg);
background-color: var(--accentFg);
}
<select>
<option>So many options</option>
<option>...</option>
</select>
<select class="theme-pink">
<option>So many options</option>
<option>...</option>
</select>
<select class="theme-construction">
<option>So many options</option>
<option>...</option>
</select>
в
Вот версия, которая работает во всех современных браузерах. Ключ находится через внешний вид:никто`, которая удаляет форматирование по умолчанию. Поскольку все форматирование пропало, вам нужно добавить обратно в стрелку, которая визуально отличает выберите из входного сигнала.
Рабочий пример:
в
select:not([multiple]) {
-webkit-appearance: none;
-moz-appearance: none;
background-position: right 50%;
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDZFNDEwNjlGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDZFNDEwNkFGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NkU0MTA2N0Y3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0NkU0MTA2OEY3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuGsgwQAAAA5SURBVHjaYvz//z8DOYCJgUxAf42MQIzTk0D/M+KzkRGPoQSdykiKJrBGpOhgJFYTWNEIiEeAAAMAzNENEOH+do8AAAAASUVORK5CYII=);
padding: .5em;
padding-right: 1.5em
}
#mySelect {
border-radius: 0
}
<!-- language: lang-html -->
<select id="mySelect">
<option>Option 1</option>
<option>Option 2</option>
</select>
в
Запись в блоге как форма CSS выпадающего стиль нет JavaScript работает для меня, но это не в Опера хотя:
в
select {
border: 0 none;
color: #FFFFFF;
background: transparent;
font-size: 20px;
font-weight: bold;
padding: 2px 10px;
width: 378px;
*width: 350px;
*background: #58B14C;
}
#mainselection {
overflow: hidden;
width: 350px;
-moz-border-radius: 9px 9px 9px 9px;
-webkit-border-radius: 9px 9px 9px 9px;
border-radius: 9px 9px 9px 9px;
box-shadow: 1px 1px 11px #330033;
background: url("arrow.gif") no-repeat scroll 319px 5px #58B14C;
}
<div id="mainselection">
<select>
<option>Select an Option</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
в
У меня в вашем случае с помощью загрузки. Это самое простое решение, которое работает:
в
select.form-control {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background-position: right center;
background-repeat: no-repeat;
background-size: 1ex;
background-origin: content-box;
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICBpZD0ic3ZnMiIKICAgdmlld0JveD0iMCAwIDM1Ljk3MDk4MyAyMy4wOTE1MTgiCiAgIGhlaWdodD0iNi41MTY5Mzk2bW0iCiAgIHdpZHRoPSIxMC4xNTE4MTFtbSI+CiAgPGRlZnMKICAgICBpZD0iZGVmczQiIC8+CiAgPG1ldGFkYXRhCiAgICAgaWQ9Im1ldGFkYXRhNyI+CiAgICA8cmRmOlJERj4KICAgICAgPGNjOldvcmsKICAgICAgICAgcmRmOmFib3V0PSIiPgogICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PgogICAgICAgIDxkYzp0eXBlCiAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4KICAgICAgICA8ZGM6dGl0bGU+PC9kYzp0aXRsZT4KICAgICAgPC9jYzpXb3JrPgogICAgPC9yZGY6UkRGPgogIDwvbWV0YWRhdGE+CiAgPGcKICAgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjAyLjAxNDUxLC00MDcuMTIyMjUpIgogICAgIGlkPSJsYXllcjEiPgogICAgPHRleHQKICAgICAgIGlkPSJ0ZXh0MzMzNiIKICAgICAgIHk9IjYyOS41MDUwNyIKICAgICAgIHg9IjI5MS40Mjg1NiIKICAgICAgIHN0eWxlPSJmb250LXN0eWxlOm5vcm1hbDtmb250LXdlaWdodDpub3JtYWw7Zm9udC1zaXplOjQwcHg7bGluZS1oZWlnaHQ6MTI1JTtmb250LWZhbWlseTpzYW5zLXNlcmlmO2xldHRlci1zcGFjaW5nOjBweDt3b3JkLXNwYWNpbmc6MHB4O2ZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZTtzdHJva2Utd2lkdGg6MXB4O3N0cm9rZS1saW5lY2FwOmJ1dHQ7c3Ryb2tlLWxpbmVqb2luOm1pdGVyO3N0cm9rZS1vcGFjaXR5OjEiCiAgICAgICB4bWw6c3BhY2U9InByZXNlcnZlIj48dHNwYW4KICAgICAgICAgeT0iNjI5LjUwNTA3IgogICAgICAgICB4PSIyOTEuNDI4NTYiCiAgICAgICAgIGlkPSJ0c3BhbjMzMzgiPjwvdHNwYW4+PC90ZXh0PgogICAgPGcKICAgICAgIGlkPSJ0ZXh0MzM0MCIKICAgICAgIHN0eWxlPSJmb250LXN0eWxlOm5vcm1hbDtmb250LXZhcmlhbnQ6bm9ybWFsO2ZvbnQtd2VpZ2h0Om5vcm1hbDtmb250LXN0cmV0Y2g6bm9ybWFsO2ZvbnQtc2l6ZTo0MHB4O2xpbmUtaGVpZ2h0OjEyNSU7Zm9udC1mYW1pbHk6Rm9udEF3ZXNvbWU7LWlua3NjYXBlLWZvbnQtc3BlY2lmaWNhdGlvbjpGb250QXdlc29tZTtsZXR0ZXItc3BhY2luZzowcHg7d29yZC1zcGFjaW5nOjBweDtmaWxsOiMwMDAwMDA7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmU7c3Ryb2tlLXdpZHRoOjFweDtzdHJva2UtbGluZWNhcDpidXR0O3N0cm9rZS1saW5lam9pbjptaXRlcjtzdHJva2Utb3BhY2l0eToxIj4KICAgICAgPHBhdGgKICAgICAgICAgaWQ9InBhdGgzMzQ1IgogICAgICAgICBzdHlsZT0iZmlsbDojMzMzMzMzO2ZpbGwtb3BhY2l0eToxIgogICAgICAgICBkPSJtIDIzNy41NjY5Niw0MTMuMjU1MDcgYyAwLjU1ODA0LC0wLjU1ODA0IDAuNTU4MDQsLTEuNDczMjIgMCwtMi4wMzEyNSBsIC0zLjcwNTM1LC0zLjY4MzA0IGMgLTAuNTU4MDQsLTAuNTU4MDQgLTEuNDUwOSwtMC41NTgwNCAtMi4wMDg5MywwIEwgMjIwLDQxOS4zOTM0NiAyMDguMTQ3MzIsNDA3LjU0MDc4IGMgLTAuNTU4MDMsLTAuNTU4MDQgLTEuNDUwODksLTAuNTU4MDQgLTIuMDA4OTMsMCBsIC0zLjcwNTM1LDMuNjgzMDQgYyAtMC41NTgwNCwwLjU1ODAzIC0wLjU1ODA0LDEuNDczMjEgMCwyLjAzMTI1IGwgMTYuNTYyNSwxNi41NDAxNyBjIDAuNTU4MDMsMC41NTgwNCAxLjQ1MDg5LDAuNTU4MDQgMi4wMDg5MiwwIGwgMTYuNTYyNSwtMTYuNTQwMTcgeiIgLz4KICAgIDwvZz4KICA8L2c+Cjwvc3ZnPgo=");
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<section class="container">
<form class="form-horizontal">
<select class="form-control">
<option>One</option>
<option>Two</option>
</select>
</form>
</section>
в
Примечание: в base64 вещи Альфа-шеврон-вниз
в SVG.
В современных браузерах это'ы относительно безболезненно стиль в <выбрать>
в CSS. С внешний вид: нет Единственный нюанс состоит в замене стрелки (если что's то, что вы хотите). Здесь'ы решение, которое использует данные встроенного:
Ури с обычным текстом в SVG:
в
select {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background-repeat: no-repeat;
background-size: 0.5em auto;
background-position: right 0.25em center;
padding-right: 1em;
background-image: url("data:image/svg+xml;charset=utf-8, \
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'> \
<polygon points='0,0 60,0 30,40' style='fill:black;'/> \
</svg>");
}
<select>
<option>Option 1</option>
<option>Option 2</option>
</select>
<select style="font-size: 2rem;">
<option>Option 1</option>
<option>Option 2</option>
</select>
в
Остальное оформление (границы, отступы, цвета и т. д.) является довольно простой.
Это работает во всех браузерах, я пробовал (в Firefox 50, 55 Крома, кромка 38 и Safari 10). Одно замечание о Firefox заключается в том, что если вы хотите использовать символ #
в URI данных (например заполнение: #000
) вы должны экранировать его (заполнение: %23000
).
select {
outline: 0;
overflow: hidden;
height: 30px;
background: #2c343c;
color: #747a80;
border: #2c343c;
padding: 5px 3px 5px 10px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 10px;
}
select option {border: 1px solid #000; background: #010;}
Используйте свойство Clip
, чтобы обрезать границы и Стрелка "выберите" элемент, а затем добавить свои собственные замены стилей в обертке:
в
<!DOCTYPE html>
<html>
<head>
<style>
select { position: absolute; clip:rect(2px 49px 19px 2px); z-index:2; }
body > span { display:block; position: relative; width: 64px; height: 21px; border: 2px solid green; background: url(http://www.stackoverflow.com/favicon.ico) right 1px no-repeat; }
</style>
</head>
<span>
<select>
<option value="">Alpha</option>
<option value="">Beta</option>
<option value="">Charlie</option>
</select>
</span>
</html>
в
Использовать второй выбор с нулевой непрозрачностью, чтобы сделать кнопки кликабельными:
в
<!DOCTYPE html>
<html>
<head>
<style>
#real { position: absolute; clip:rect(2px 51px 19px 2px); z-index:2; }
#fake { position: absolute; opacity: 0; }
body > span { display:block; position: relative; width: 64px; height: 21px; background: url(http://www.stackoverflow.com/favicon.ico) right 1px no-repeat; }
</style>
</head>
<span>
<select id="real">
<option value="">Alpha</option>
<option value="">Beta</option>
<option value="">Charlie</option>
</select>
<select id="fake">
<option value="">Alpha</option>
<option value="">Beta</option>
<option value="">Charlie</option>
</select>
</span>
</html>
в
Координаты отличаются между WebKit и другие браузеры, но запроса@Media могут предусматривать, что.
Ссылки
Редактировать этот элемент не рекомендуется, но если вы хотите попробовать это's, как любой другой HTML-элемент.
Редактировать пример:
/* Edit select */
select {
/* CSS style here */
}
/* Edit option */
option {
/* CSS style here */
}
/* Edit selected option */
/* element attr attr value */
option[selected="selected"] {
/* CSS style here */
}
<select>
<option >Something #1</option>
<option selected="selected">Something #2</option>
<option >Something #3</option>
</select>
Да. Вы можете стилизовать любой элемент HTML по имени его тега, например, так:
select {
font-weight: bold;
}
Конечно, вы также можете использовать CSS-класс, чтобы придать ему стиль, как и любому другому элементу:
<select class="important">
<option>Important Option</option>
<option>Another Important Option</option>
</select>
<style type="text/css">
.important {
font-weight: bold;
}
</style>
Очень хороший пример, который использует после
и перед
, Чтобы сделать трюк в стайлинга выбрать окна с помощью CSS3 | CSSDeck
label {
position: relative;
display: inline-block;
}
select {
display: inline-block;
padding: 4px 3px 5px 5px;
width: 150px;
outline: none;
color: black;
border: 1px solid #C8BFC4;
border-radius: 4px;
box-shadow: inset 1px 1px 2px #ddd8dc;
background-color: lightblue;
}
При этом используется цвет фона для отдельных элементов и я убрала картинку..
Здесь'ы решение, основанное на моих любимых идей из этой дискуссии. Это позволяет в стиле &ЛТ;выберите> элемент напрямую, без дополнительной разметки.
Он работает интернет&ампер;усилитель; nbsp;Обозреватель&ампер;усилитель; nbsp;10 (и выше) с резервом для Internet&ампер;усилитель; nbsp;Обозреватель&ампер;усилитель; nbsp;8/9. Один нюанс для этих браузеров заключается в том, что фоновое изображение должно располагаться и быть достаточно мал, чтобы спрятаться за родной расширить контроль.
<select name='options'>
<option value='option-1'>Option 1</option>
<option value='option-2'>Option 2</option>
<option value='option-3'>Option 3</option>
</select>
body {
padding: 4em 40%;
text-align: center;
}
select {
$bg-color: lightcyan;
$text-color: black;
appearance: none; // Using -prefix-free http://leaverou.github.io/prefixfree/
background: {
color: $bg-color;
image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1255/caret--down-15.png");
position: right;
repeat: no-repeat;
}
border: {
color: mix($bg-color, black, 80%);
radius: .2em;
style: solid;
width: 1px;
right-color: mix($bg-color, black, 60%);
bottom-color: mix($bg-color, black, 60%);
}
color: $text-color;
padding: .33em .5em;
width: 100%;
}
// Removes default arrow for Internet Explorer 10 (and later)
// Internet Explorer 8/9 gets the default arrow which covers the caret
// image as long as the caret image is smaller than and positioned
// behind the default arrow
select::-ms-expand {
display: none;
}
Как в Интернет Эксплорер 10, вы можете использовать клавишу ::-МС-расширить
псевдо селектор, элемент стиля, и скрывать, раскрывающийся элемент стрелки.
select::-ms-expand {
display:none;
/* or visibility: hidden; to keep it's space/hitbox */
}
Остальные стайлинг должен быть похож на другие браузеры.
[Здесь основной развилке Danield'с jsfiddle, что касается поддержки для IE10][2]
Проверить эту скрипку, и да простят меня overstyling:
Секрет: как только &ЛТ;выберите> тег получает свойство называется "размер", он будет вести себя как с фиксированной высотой списке, и, вдруг, по какой-то причине, позволяет стиль, черт побери. Сейчас, строго говоря, фиксированный список-это побочный эффект - но это только помогает нам больше, потому что мы используем его в "упал-вниз посмотри на".
Минимальный пример:<БР>
<style>
.stylish span {position:relative;}
.stylish select {position:absolute;left:0px;display:none}
</style>
...
<div class="stylish">
<label> Choose your superhero: </label>
<span>
<input onclick="$(this).closest('div').find('select').slideToggle(110)"><br>
<select size=15 onclick="$(this).hide().closest('div').find('input').val($(this).find('option:selected').text());">
<optgroup label="Fantasy"></optgroup>
<option value="1"> Gandalf </option>
<option value="2"> Harry Potter </option>
<option value="3"> Jon Snow </option>
<!-- ... and so on -->
</select>
</span>
</div>
(чтобы сохранить его простым, я сделал это с помощью jQuery, но вы можете сделать то же самое без него) <БР><БР>
Это решение дает вам больше, чем просто выбрать значение и вручную редактировать. Используйте свойство readonly, если вы предпочитаете по умолчанию выберите-ограниченным образом.
Максимизация возможностей моделирования, &ЛТ;optgroup> теги не по своих детей, они'вновь перенесли перед ними. Это'ы намеренным, это'ы визуально понятнее, и они'вновь счастливым, чтобы работать так, Дон'т беспокойтесь.
Скрипты: да я знаю, что ОП сказал "нет javascript" но я понял это как пожалуйста, Дон'т возиться с плагинами, это хорошо. Вы Don'т нужно никаких библиотек для этого. Даже не jQuery, как я уже сказал, Это's только для наглядности примера.
Испытана в интернет&ампер;усилитель; nbsp;проводник (10 и 11), край, Firefox и Chrome
в
select::-ms-expand {
display: none;
}
select {
display: inline-block;
box-sizing: border-box;
padding: 0.5em 2em 0.5em 0.5em;
border: 1px solid #eee;
font: inherit;
line-height: inherit;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
background-repeat: no-repeat;
background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
background-position: right 15px top 1em, right 10px top 1em;
background-size: 5px 5px, 5px 5px;
}
<select name="">
<option value="">Lorem</option>
<option value="">Lorem Ipsum</option>
</select>
<select name="" disabled>
<option value="">Disabled</option>
</select>
<select name="" style="color:red;">
<option value="">Color!</option>
<option value="">Lorem Ipsum</option>
</select>
в