проблема с и: после с 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;
}

Так это нормально, или есть хитрость?

86
css html select

7 ответов

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

92

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

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

47

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

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

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

по моему опыту он просто не работает, если вы не готовы обернуть <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-кодирование s (%3E). В случае, если вы должны напечатать любые символы, отличные от ASCII, которые у вас есть чтобы получить их представление UTF-8 (например, BabelMap может помочь вам в этом), а затем предоставить это представление в URL-кодированной форме-например, для ▾ (U+25BE черный вниз указывая небольшой треугольник) UTF-8 представление \xE2\x96\xBE что это %E2%96%BE когда URL-кодируется.

8

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

Это современное решение, которое я приготовила с помощью шрифт-удивительный. Расширения поставщиков были опущены для краткости.

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

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

тем не менее, вы можете стиль select-wrapper того же размера, что и элемент select и стиль его фона для достижения того же эффекта.

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

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

5