Skip to content

Instantly share code, notes, and snippets.

@andrewbranch
Last active October 16, 2017 14:04
Show Gist options
  • Save andrewbranch/7106286 to your computer and use it in GitHub Desktop.
Save andrewbranch/7106286 to your computer and use it in GitHub Desktop.
Flat styling of select2.
// 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;
}
@techhysahil
Copy link

Have worked little bit more to make it FullyFlat design select2. Below is the link for updated code:
https://github.com/techhysahil/Select2-Flat-UI/blob/master/Overide.css

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment