Ответ 1
Я не проверял это широко, но у меня создается впечатление, что это невозможно (пока?), из-за того, как элементы select генерируются операционной системой, на которой работает браузер, а не самого браузера.
Проблема с <select> и: после с CSS в WebKit
Я хотел бы добавить некоторый стиль в поле выбора с псевдо: после (для стиля моего окна выбора с 2 частями и без изображений). Здесь HTML:
<select name="">
<option value="">Test</option>
</select>
И это не работает. Я не знаю, почему, и я не нашел ответа в спецификациях W3C. Здесь CSS:
select {
-webkit-appearance: none;
background: black;
border: none;
border-radius: 0;
color: white;
}
select:after {
content: " ";
display: inline-block;
width: 24px; height: 24px;
background: blue;
}
Итак, это нормально или есть трюк?
Ответы
Ответ 2
Я искал одно и то же, поскольку фон моего выбора совпадает с цветом стрелки. Как уже упоминалось ранее, невозможно добавить что-либо, используя: before или: after на элементе select. Мое решение состояло в создании элемента оболочки, на котором я добавил следующее: перед кодом.
.select-wrapper {
position: relative;
}
.select-wrapper:before {
content: '\f0d7';
font-family: FontAwesome;
color: #fff;
display: inline-block;
position: absolute;
right: 20px;
top: 15px;
pointer-events: none;
}
И этот мой выбор
select {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
width: 100%;
padding: 10px 20px;
background: #000;
color: #fff;
border: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
select::-ms-expand {
display: none;
}
Я использовал FontAwesome.io для своей новой стрелки, но вы можете использовать все, что захотите. Очевидно, это не идеальное решение, но в зависимости от ваших потребностей этого может быть достаточно.
Ответ 3
По моему опыту, он просто не работает, если только вы не захотите обернуть свой <select> в какую-нибудь оболочку. Но вместо этого вы можете использовать фоновое изображение SVG. Например.
.archive .options select.opt {
-moz-appearance: none;
-webkit-appearance: none;
padding-right: 1.25EM;
appearance: none;
position: relative;
background-color: transparent;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' height='10px' width='15px'%3E%3Ctext x='0' y='10' fill='gray'%3E%E2%96%BE%3C/text%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: 1.5EM 1EM;
background-position: right center;
background-clip: border-box;
-moz-background-clip: border-box;
-webkit-background-clip: border-box;
}
.archive .options select.opt::-ms-expand {
display: none;
}
Просто будьте осторожны с правильной кодировкой URL из-за IE. Вы должны использовать charset=utf8 (а не только utf8), не используйте двойные кавычки ("), чтобы разграничить значения атрибутов SVG, вместо этого используйте apostrophes ('), чтобы упростить вашу жизнь. URL-encode s (% 3E). Если вы хотите напечатать любые символы, отличные от ASCII, вы должны получить их представление UTF-8 (например, BabelMap поможет вам в этом), а затем предоставить это представление в кодированной по URL форме - например, для ▾ (U+25BE BLACK DOWN- POINTING SMALL TRIANGLE) Представление UTF-8 \xE2\x96\xBE, которое %E2%96%BE при кодировании URL.
Ответ 4
Эта запись может помочь http://bavotasan.com/2011/style-select-box-using-only-css/
Он использует внешний div с классом для решения этой проблемы.
<div class="styled-select">
<select>
<option>Here is the first option</option>
<option>The second option</option>
</select>
</div>
Ответ 5
Столкнулась с той же проблемой. Вероятно, это может быть решение:
<select id="select-1">
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
<label for="select-1"></label>
#select-1 {
...
}
#select-1 + label:after {
...
}
Ответ 6
Это решение похоже на одно из sroy, но с css-треугольником вместо веб-шрифта:
.select-wrapper {
position: relative;
width: 200px;
}
.select-wrapper:after {
content: "";
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 6px solid #666;
position: absolute;
right: 8px;
top: 8px;
pointer-events: none;
}
select {
background: #eee;
border: 0 !important;
border-radius: 0;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
text-indent: 0.01px;
text-overflow: "";
font-size: inherit;
line-height: inherit;
width: 100%;
}
select::-ms-expand {
display: none;
}<div class="select-wrapper">
<select>
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
</select>
</div>Ответ 7
Это современное решение, которое я приготовил с помощью font-awesome. Расширения поставщиков для краткости опущены.
HTML
<fieldset>
<label for="color">Select Color</label>
<div class="select-wrapper">
<select id="color">
<option>Red</option>
<option>Blue</option>
<option>Yellow</option>
</select>
<i class="fa fa-chevron-down"></i>
</div>
</fieldset>
SCSS
fieldset {
.select-wrapper {
position: relative;
select {
appearance: none;
position: relative;
z-index: 1;
background: transparent;
+ i {
position: absolute;
top: 40%;
right: 15px;
}
}
}
Если ваш элемент выбора имеет определенный фоновый цвет, тогда это не будет работать, поскольку этот фрагмент по существу помещает значок Chevron за элемент выбора (чтобы позволить щелчку по значку по-прежнему инициировать действие выбора).
Тем не менее, вы можете создать оболочку select-wrapper того же размера, что и элемент выбора, и создать свой фон для достижения того же эффекта.
Посмотрите мой CodePen для рабочей демонстрации, которая показывает этот бит кода как в темном, так и в светлом тематическом поле выбора, используя обычный ярлык и метку "placeholder" и другие очищенные стили, такие как границы и ширины.
P.S. Это ответ, который я опубликовал в другом, дублирующем вопросе в начале этого года.
Ответ 8
<div class="select">
<select name="you_are" id="dropdown" class="selection">
<option value="0" disabled selected>Select</option>
<option value="1">Student</option>
<option value="2">Full-time Job</option>
<option value="2">Part-time Job</option>
<option value="3">Job-Seeker</option>
<option value="4">Nothing Yet</option>
</select>
</div>
Внедрение стиля выбора, почему вы не добавляете div вне выбора.
и стиль тогда в CSS
.select{
width: 100%;
height: 45px;
position: relative;
}
.select::after{
content: '\f0d7';
position: absolute;
top: 0px;
right: 10px;
font-family: 'Font Awesome 5 Free';
font-weight: 900;
color: #0b660b;
font-size: 45px;
z-index: 2;
}
#dropdown{
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
height: 45px;
width: 100%;
outline: none;
border: none;
border-bottom: 2px solid #0b660b;
font-size: 20px;
background-color: #0b660b23;
box-sizing: border-box;
padding-left: 10px;
padding-right: 10px;
}
Ответ 9
Как прокомментировали другие, использование этих псевдоэлементов не представляется возможным.
Вот решение, которое не имеет требований к оболочке: оно использует SVG в background-image. Вам может потребоваться пользовательский HTML-декодер, чтобы понять, как изменить цвет заливки.
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
background-repeat: no-repeat;
background-position: right .7em top 50%;
background-size: .65em auto;
Ущипнул от CSS-хитрости.