Skip to content

Instantly share code, notes, and snippets.

@andrewbranch

andrewbranch/select2-override.css

Last active October 16, 2017 14:04
Download ZIP

Revisions

  1. andrewbranch revised this gist Oct 22, 2013. 1 changed file with 61 additions and 0 deletions.
    61 changes: 61 additions & 0 deletions select2-override.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,61 @@
    .select2-container .select2-choice {
    height: 34px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    background-color: #fff;
    background-image: none;
    background: #fff;
    }

    .select2-container .select2-choice .select2-chosen { margin-top: 4px }
    .select2-container .select2-choice abbr { top: 13px }
    .select2-container .select2-choice,
    .select2-container .select2-choice .select2-arrow {
    -webkit-border-radius: 0;
    border-radius: 0;
    border-color: #ccc;
    }

    .select2-container .select2-choice .select2-arrow {
    background-color: #fafafa;
    background-image: none;
    background: #fafafa;
    width: 22px;
    }

    .select2-container .select2-choice .select2-arrow b>span { margin: 4px 0 0 6px }
    .select2-container.select2-container-active .select2-choice { border-color: #91acce }
    .select2-container.select2-dropdown-open .select2-choice { border-bottom-color: #ccc }
    .select2-drop {
    -webkit-border-radius: 0 !important;
    border-radius: 0 !important;
    }

    .select2-drop:not(.select2-drop-above) { margin-top: -3px }
    .select2-drop .select2-results { max-height: 300px }
    .select2-drop .select2-results li {
    line-height: inherit;
    margin: 0;
    padding: 0;
    }

    .select2-search { margin: 4px 0 }
    .select2-search input,
    .select2-search input:focus {
    background-color: #fff;
    background-image: none;
    background: #fff;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    border: none;
    }

    .select2-container.form-control {
    border: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    padding: 0;
    }
  2. andrewbranch created this gist Oct 22, 2013.
    95 changes: 95 additions & 0 deletions select2-override.less
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,95 @@
    // mixins
    .border-radius(@radius) {
    -webkit-border-radius: @radius;
    border-radius: @radius;
    }

    .box-shadow(@shadow) {
    -webkit-box-shadow: @shadow;
    -moz-box-shadow: @shadow;
    box-shadow: @shadow;
    }

    .background-color(@color) {
    background-color: @color;
    background-image: none;
    background: @color;
    }


    // closed dropdown
    .select2-container {

    .select2-choice {
    height: 34px;
    .box-shadow(none);
    .background-color(white);

    .select2-chosen {
    margin-top: 4px;
    }

    abbr {
    top: 13px;
    }

    &, .select2-arrow {
    .border-radius(0);
    border-color: #ccc;
    }

    .select2-arrow {
    .background-color(#fafafa);
    width: 22px;

    b > span {
    margin: 4px 0 0 6px;
    }
    }
    }

    &.select2-container-active .select2-choice {
    border-color: #91acce;
    }

    &.select2-dropdown-open .select2-choice {
    border-bottom-color: #ccc;
    }
    }

    // open dropdown
    .select2-drop {
    .border-radius(~"0 !important");

    &:not(.select2-drop-above) {
    margin-top: -3px;
    }

    .select2-results {
    max-height: 300px;

    li {
    line-height: inherit;
    margin: 0;
    padding: 0;
    }
    }
    }

    // search input
    .select2-search {
    margin: 4px 0;

    input, input:focus {
    .background-color(white);
    .box-shadow(none);
    border: none;
    }
    }

    // Bootstrap 3 form-control fix
    .select2-container.form-control {
    border: none;
    .box-shadow(none);
    padding: 0;
    }