8

当然，我知道 SELECT 表单元素很难设计和/或修改超出基础的元素。

只是出于好奇，有人知道一次性引导程序（来自推特的那个）解决方案，它可以让我影响 SELECT 的大小，甚至可能应用看起来更像引导按钮的渐变（而不是粗糙的表面）他们现在有）。

我不介意自己在 CSS 上胡思乱想，但我想在重新发明轮子之前先问问周围的情况。

任何指针、链接或建议将不胜感激。

4

3 回答 3

33

您可以使用 jQuery 插件 bootstrap-select：

https://developer.snapappointments.com/bootstrap-select/

它会将您的选择变成引导按钮下拉菜单

于 2012-10-10T19:53:38.603 回答
4

有点晚了，但也许这可以帮助http://blog.iamjamoy.com/docs/select.html

或者这个http://ivaynberg.github.com/select2/

第一个不适用于IE，如果您可以修复它，请提供。

于 2012-06-13T03:06:31.723 回答
0 
jQuery(function($){
        $('select').each(function(i, e){
            if (!($(e).data('convert') == 'no')) {
                //$(e).hide().wrap('<div class="btn-group" id="select-group-' + i + '" />');
                $(e).after('<div class="btn-group" id="select-group-' + i + '" />');
                var select = $('#select-group-' + i);
                var current = ($(e).val()) ? $(e).val(): '&nbsp;';
                select.html('<input type="hidden" value="' + $(e).val() + '" name="' + $(e).attr('name') + '" id="' + $(e).attr('id') + '" class="' + $(e).attr('class') + '" /><a class="btn" href="javascript:;">' + current + '</a><a class="btn dropdown-toggle" data-toggle="dropdown" href="javascript:;"><span class="caret"></span></a><ul class="dropdown-menu"></ul>');
                $(e).find('option').each(function(o,q) {
                    select.find('.dropdown-menu').append('<li><a href="javascript:;" data-value="' + $(q).attr('value') + '">' + $(q).text() + '</a></li>');
                    if ($(q).attr('selected')) select.find('.dropdown-menu li:eq(' + o + ')').click();
                });
                select.find('.dropdown-menu a').click(function() {
                    select.find('input[type=hidden]').val($(this).data('value')).change();
                    select.find('.btn:eq(0)').text($(this).text());
                });
                $(e).remove();
            }
        });
    });
于 2013-02-22T08:09:06.697 回答