Как оформить элементы <select>?

Question

Как я могу полностью изменить дизайн элемента <select>?Например, вот как я хочу, чтобы мой раскрывающийся список выглядел:

Screeshot http://i56.tinypic.com/2n7h7uv.png

Есть ли способ сделать это с помощью CSS?Если нет, то jQuery?

Answer 1

CSS поможет вам только в определенных браузерах - например, Internet Explorer полностью игнорирует его для SELECTs

, однако вы все равно можете использовать обычный выбор на странице без CSS и затем использовать jQueryплагин, который изящно деградирует (поэтому, когда у людей не включен JS, они все равно увидят это оригинальное поле выбора)

один из таких плагинов это отличный jQueryВыбор интерфейса пользователя из Filament Group

однако, как указано clonked в комментариях - используйте по крайней мере некоторый браузер, сниффинг , чтобы проверить, являются ли людине получая доступа к этому меню с iPhone или подобных устройств, поскольку у них могут быть проблемы с доступом к этому полю выбора JS

, если вы случайно используете PHP на стороне сервера, вот хорошая библиотека для анализа браузера: http://chrisschuld.com/projects/browser-php-detecting-a-users-browser-from-php/

Answer 2

Существует несколько плагинов jQuery, которые помогут вам в этом.

Вот легкий: http://www.adamcoulombe.info/lab/jquery/select-box/

А вот учебник по созданию с нуля изображений: http://www.devirtuoso.com/2009/08/styling-drop-down-boxes-with-jquery/

Answer 3

У вас будут проблемы с достижением согласованного стиля элемента <select> только с помощью CSS. Лучше всего использовать jquery. К счастью, очень хороший плагин уже создан:

http://www.filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/

Answer 4

Вы можете попробовать следующим образом. Где selectBg.png - это 1px фоновое изображение. Это даст вывод, подобный следующему изображению:

Код CSS:

select.onlyOne {
    background: url("./theme/default/images/selectBg.png") repeat scroll 0 0 transparent;
    border: 0 none;
    color: #747862;
    font-size: 12px;
    font-weight: bold;
    height: 40px;
    margin-bottom: 0;
    padding: 8px 4px 8px 0;
    width: 430px;
}

HTML код:

<select class="onlyOne" name="somename">
   <option value="somevalue">somevalue</option>
   <option value="somevalue">somevalue</option>
</select>

Answer 5

Мы можем разработать тег для выбора, используя кодирование jquery, проверьте кодировку ниже

(document).ready(function() {
$('#btn-add').click(function(){
    $('#select-from option:selected').each( function() {
            $('#select-to').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
        $(this).remove();
    });
});
$('#btn-remove').click(function(){
    $('#select-to option:selected').each( function() {
        $('#select-from').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
        $(this).remove();
    });
});
$('#btn-up').bind('click', function() {
    $('#select-to option:selected').each( function() {
        var newPos = $('#select-to option').index(this) - 1;
        if (newPos > -1) {
            $('#select-to option').eq(newPos).before("<option value='"+$(this).val()+"' selected='selected'>"+$(this).text()+"</option>");
            $(this).remove();
        }
    });
});
$('#btn-down').bind('click', function() {
    var countOptions = $('#select-to option').size();
    $('#select-to option:selected').each( function() {
        var newPos = $('#select-to option').index(this) + 1;
        if (newPos < countOptions) {
            $('#select-to option').eq(newPos).after("<option value='"+$(this).val()+"' selected='selected'>"+$(this).text()+"</option>");
            $(this).remove();
        }
    });
});

});и HTML-код

</select>
<a href="JavaScript:void(0);" id="btn-add">Add &raquo;</a>
<a href="JavaScript:void(0);" id="btn-remove">&laquo; Remove</a>
<select name="selectto" id="select-to" multiple size="5">
  <option value="5">Item 5</option>
  <option value="6">Item 6</option>
  <option value="7">Item 7</option>
</select>

Answer 6

это невозможно!

стиль моделируется другими тегами html и css!