Styling of Select2 dropdown select boxes

前端 未结 3 2022
梦毁少年i
梦毁少年i 2020-12-30 00:30

I\'m using Select2 in a project to style some select boxes in a search form. I managed to change the gradient background of the arrow container to a black gradient:

相关标签:
3条回答
  • 2020-12-30 00:51

    Thanks for the suggestions in the comments. I made a bit of a dirty hack to get what I want without having to create my own image. With javascript I first hide the default tag that's being used for the down arrow, like so:

    $('b[role="presentation"]').hide();
    

    I then included font-awesome in my page and add my own down arrow, again with a line of javascript, to replace the default one:

    $('.select2-arrow').append('<i class="fa fa-angle-down"></i>');
    

    Then with CSS I style the select boxes. I set the height, change the background color of the arrow area to a gradient black, change the width, font-size and also the color of the down arrow to white:

    .select2-container .select2-choice {
        padding: 5px 10px;
        height: 40px;
        width: 132px; 
        font-size: 1.2em;  
    }
    
    .select2-container .select2-choice .select2-arrow {
        background-image: -khtml-gradient(linear, left top, left bottom, from(#424242), to(#030303));
        background-image: -moz-linear-gradient(top, #424242, #030303);
        background-image: -ms-linear-gradient(top, #424242, #030303);
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #424242), color-stop(100%, #030303));
        background-image: -webkit-linear-gradient(top, #424242, #030303);
        background-image: -o-linear-gradient(top, #424242, #030303);
        background-image: linear-gradient(#424242, #030303);
        width: 40px;
        color: #fff;
        font-size: 1.3em;
        padding: 4px 12px;
    }
    

    The result is the styling the way I want it:

    screenshot

    Update 5/6/2015 As @Katie Lacy mentioned in the other answer the classnames have been changed in version 4 of Select2. The updated CSS with the new classnames should look like this:

    .select2-container--default .select2-selection--single{
        padding:6px;
        height: 37px;
        width: 148px; 
        font-size: 1.2em;  
        position: relative;
    }
    
    .select2-container--default .select2-selection--single .select2-selection__arrow {
        background-image: -khtml-gradient(linear, left top, left bottom, from(#424242), to(#030303));
        background-image: -moz-linear-gradient(top, #424242, #030303);
        background-image: -ms-linear-gradient(top, #424242, #030303);
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #424242), color-stop(100%, #030303));
        background-image: -webkit-linear-gradient(top, #424242, #030303);
        background-image: -o-linear-gradient(top, #424242, #030303);
        background-image: linear-gradient(#424242, #030303);
        width: 40px;
        color: #fff;
        font-size: 1.3em;
        padding: 4px 12px;
        height: 27px;
        position: absolute;
        top: 0px;
        right: 0px;
        width: 20px;
    }
    

    JS:

    $('b[role="presentation"]').hide();
    $('.select2-selection__arrow').append('<i class="fa fa-angle-down"></i>');
    
    0 讨论(0)
  • 2020-12-30 01:07

    Here is a working example of above. http://jsfiddle.net/z7L6m2sc/ Now select2 has been updated the classes have change may be why you cannot get it to work. Here is the css....

    .select2-dropdown.select2-dropdown--below{
        width: 148px !important;
    }
    
    .select2-container--default .select2-selection--single{
        padding:6px;
        height: 37px;
        width: 148px; 
        font-size: 1.2em;  
        position: relative;
    }
    
    .select2-container--default .select2-selection--single .select2-selection__arrow {
        background-image: -khtml-gradient(linear, left top, left bottom, from(#424242), to(#030303));
        background-image: -moz-linear-gradient(top, #424242, #030303);
        background-image: -ms-linear-gradient(top, #424242, #030303);
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #424242), color-stop(100%, #030303));
        background-image: -webkit-linear-gradient(top, #424242, #030303);
        background-image: -o-linear-gradient(top, #424242, #030303);
        background-image: linear-gradient(#424242, #030303);
        width: 40px;
        color: #fff;
        font-size: 1.3em;
        padding: 4px 12px;
        height: 27px;
        position: absolute;
        top: 0px;
        right: 0px;
        width: 20px;
    }
    
    0 讨论(0)
  • 2020-12-30 01:15

    This is how i changed placeholder arrow color, the 2 classes are for dropdown open and dropdown closed, you need to change the #fff to the color you want:

    .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
        border-color: transparent transparent #fff transparent !important;
      }
      .select2-container--default .select2-selection--single .select2-selection__arrow b {
        border-color: #fff transparent transparent transparent !important;
      }
    
    0 讨论(0)
提交回复
热议问题