selezionare più piccolo con bootstrap.css

Question

Naturalmente so che gli elementi del modulo SELECT sono difficili da stile e/o modificare oltre le basi.

Solo per curiosità, qualcuno sa di una soluzione onestart bootstrap (quella di Twitter) che mi permetterebbe di influenzare la dimensione del SELECT e forse anche di applicare un gradiente che assomiglia più ad un pulsante di bootstrap (rispetto alla superficie graffiante che hanno ora).

Non mi importa di scimmiottare con il CSS, ma ho pensato di chiedere in giro prima di reinventare la ruota.

Qualsiasi suggerimento, link o suggerimento sarebbe molto apprezzato.

Answer 1

Puoi usare il mio plugin per jQuery:

http://silviomoreto.github.com/bootstrap-select/

si trasformerà la vostra selezione in un pulsante a discesa bootstrap

Answer 2

un po 'tardi, ma forse questo può aiutare http://blog.iamjamoy.com/docs/select.html

o questo http://ivaynberg.github.com/select2/

Il primo lavoro Indifferente su IE, se è possibile risolvere il problema si prega di fornire.

Answer 3

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