Псевдоэлементы и тег SELECT

Ответ 1

Ну, похоже, что теги SELECT не позволяют: после или: перед псевдоопределениями, потому что они настроены каждым поставщиком, поэтому довольно сложно их изменить, и это потому, что они не позволяют: до или: после псевдо элементов на них.

Для всех, кто видит это, существует хороший способ создать пользовательский элемент SELECT с jQuery и минимальную модификацию... Создайте выбор, а затем используйте jQuery для его редактирования:

// Iterate over each select element
$('select').each(function() {

// Cache the number of options
var $this = $(this),
    numberOfOptions = $(this).children('option').length;

// Hides the select element
$this.addClass('s-hidden');

// Wrap the select element in a div
$this.wrap('<div class="select"></div>');

// Insert a styled div to sit over the top of the hidden select element
$this.after('<div class="styledSelect"></div>');

// Cache the styled div
var $styledSelect = $this.next('div.styledSelect');

// Show the first select option in the styled div
$styledSelect.text($this.children('option').eq(0).text());

// Insert an unordered list after the styled div and also cache the list
var $list = $('<ul />', {
    'class': 'options'
}).insertAfter($styledSelect);

// Insert a list item into the unordered list for each select option
for (var i = 0; i < numberOfOptions; i++) {
    $('<li />', {
        text: $this.children('option').eq(i).text(),
        rel: $this.children('option').eq(i).val()
    }).appendTo($list);
}

// Cache the list items
var $listItems = $list.children('li');

// Show the unordered list when the styled div is clicked (also hides it if the div is clicked again)
$styledSelect.click(function(e) {
    e.stopPropagation();
    $('div.styledSelect.active').each(function() {
        $(this).removeClass('active').next('ul.options').hide();
    });
    $(this).toggleClass('active').next('ul.options').toggle();
});

// Hides the unordered list when a list item is clicked and updates the styled div to show the selected list item
// Updates the select element to have the value of the equivalent option
$listItems.click(function(e) {
    e.stopPropagation();
    $styledSelect.text($(this).text()).removeClass('active');
    $this.val($(this).attr('rel'));
    $list.hide();
    /* alert($this.val()); Uncomment this for demonstration! */
});

// Hides the unordered list when clicking outside of it
$(document).click(function() {
    $styledSelect.removeClass('active');
    $list.hide();
});

});

http://jsfiddle.net/tovic/ZTHkQ/

Ответ 2

Вот компромисс, который я использовал. http://jsfiddle.net/pht9d295/3/

<div class="select-wrapper">
    <select>
        <option>United Kingdom</option>
        <option>Canada</option>
        <option>United States</option>
    </select>
</div>

И CSS

body {
    background-color: #f6f6f6;
    padding: 10px;
}
.select-wrapper {
    background-color: #FFF;
    display: inline-block;
    position: relative;
}
.select-wrapper:after {
    content:"\f078";
    font-family:'FontAwesome';
    position: absolute;
    top: 13px;
    right: 10px;
    z-index: 5;
 }
select {
    padding: 10px 40px 10px 10px;
    -webkit-appearance: none;
    -ms-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid #bbb;
    background-color: transparent;
    border-radius: 0;
    position: relative;
    cursor: pointer;
    z-index: 10;
}

Ответ 3

Это современное решение, которое я приготовил с помощью 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" и другие очищенные стили, такие как границы и ширины.