Skip to content

Instantly share code, notes, and snippets.

@andrewbranch
Last active October 16, 2017 14:04
Show Gist options
  • Star 9 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • 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.
.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;
}
// 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