CODEWITHSUNDEEP
jquery-uitwitter-bootstrap
Ace
Ace

Reputation: 664

smaller & nicer select with bootstrap.css

Of course I know that SELECT form elements are hard to style and/or modify beyond the basics.

Just out of curiosity, does anyone know of a one-off bootstrap (the one from twitter) solution that would allow me to affect the size of the SELECT and perhaps even apply a gradient that looks more like a bootstrap button (than the scratchy surface they have now).

I don't mind noodling around with the CSS myself, but I thought I'd ask around before re-inventing the wheel.

Any pointers, links or suggestions would be greatly appreciated.

Upvotes: 8

Views: 27718

Answers (3)

silviomoreto
silviomoreto

Reputation: 5897

You can use the jQuery plugin bootstrap-select:

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

It will turn your select into a bootstrap button dropdown

Upvotes: 33

btkakashi
btkakashi

Reputation: 9

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

Upvotes: 0

alejandro
alejandro

Reputation: 409

A bit late but maybe this can help http://blog.iamjamoy.com/docs/select.html

or this http://ivaynberg.github.com/select2/

The first one doesn´t work on IE, if you can fix it please provide.

Upvotes: 4

Related Questions