проблема с ‹select› и :after с CSS в WebKit

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

Я искал то же самое, так как фон моего выбора такой же, как цвет стрелки. Как упоминалось ранее, пока невозможно добавить что-либо, используя :before или :after для элемента select. Мое решение состояло в том, чтобы создать элемент-оболочку, в который я добавил следующий код :before.

.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 для своей новой стрелки, но вы можете использовать все, что захотите. Очевидно, что это не идеальное решение, но в зависимости от ваших потребностей этого может быть достаточно.

По моему опыту, это просто не работает, если вы не хотите обернуть свой <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, вместо этого используйте апострофы ('), чтобы упростить себе жизнь. URL-encode s (%3E). Если у вас есть для печати любых символов, отличных от ASCII, вы должны получить их представление UTF-8 (например, BabelMap может помочь вам в этом), а затем предоставить это представление в форме URL-кодирования, например, для ▾ (U+25BE ЧЕРНЫЙ МАЛЕНЬКИЙ ТРЕУГОЛЬНИК, УКАЗАННЫЙ ВНИЗ) UTF- 8 представлено \xE2\x96\xBE, которое равно %E2%96%BE при кодировании URL.

Этот пост может помочь 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>

Столкнулся с той же проблемой. Вероятно, это может быть решением:

<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 {
    ...
}

Что делать, если изменение разметки невозможно?

Вот решение, которое не требует обёртки: оно использует SVG в фоновом изображении. Возможно, вам потребуется использовать декодер объектов 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-Tricks.

Это решение похоже на решение от 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>

Это современное решение, которое я придумал с помощью 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;
            }
        }
    }

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

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

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

P.S. Это ответ, который я опубликовал на другой дублирующий вопрос ранее в этом году.

<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;
}