Skip to content

Instantly share code, notes, and snippets.

@eversionsystems
Last active May 24, 2020 08:31
Show Gist options
  • Save eversionsystems/3a6a351ecd8bb65691c3a3d8240d9e2e to your computer and use it in GitHub Desktop.
Save eversionsystems/3a6a351ecd8bb65691c3a3d8240d9e2e to your computer and use it in GitHub Desktop.
Haven't been able to find anything that formats the select2 control properly for Bootstrap 4 so I complied this sccs file to do so. Includes form validation styling but only includes form-control-lg and form-control classes. Will add the form-control-sm later.
/**
* Feel free to change the colors below.
* Need to update this this to handle form-control-sm.
* Ensure you load these customizations after the select2 css file in order to override them.
*
* This is an example of the input and jQuery you need
*
* <select id="select-example" class="custom-select form-control" style="width:100%">
<option value="">--Add Value--</option>
</select>
*
*
$('#select-example').select2({
width: 'resolve'
})
*
*
*/
.was-validated .custom-select:invalid+.select2 .select2-selection {
border-color: $danger;
}
.was-validated .custom-select:valid+.select2 .select2-selection {
border-color: $success;
}
*:focus {
outline: 0px;
}
span.select2-selection.select2-selection--single:focus {
color: $input-color;
background-color: $input-bg;
border-color: $input-border-color;
outline: 0;
@include form-control-focus();
}
.form-control-lg+.select2 .select2-selection.select2-selection--single {
height: $input-height-lg;
padding: $input-padding-y-lg $input-padding-x-lg;
@include font-size($input-font-size-lg);
line-height: $input-line-height-lg;
@include border-radius($input-border-radius-lg);
}
.form-control+.select2 .select2-selection.select2-selection--single {
height: $input-height;
padding: $input-padding-y $input-padding-x;
@include font-size($input-font-size);
line-height: $input-line-height;
@include border-radius($input-border-radius);
}
.form-control-lg+.select2-container--default .select2-selection--single .select2-selection__arrow {
height: $input-height-lg;
}
.form-control+.select2-container--default .select2-selection--single .select2-selection__arrow {
height: $input-height;
}
.select2-container--default .select2-selection--single {
border: $input-border-width solid $input-border-color;
}
.select2-container .select2-selection--single .select2-selection__rendered {
padding-left: 0;
}
.form-control-lg+.select2-container--default .select2-selection--single .select2-selection__rendered {
line-height: $input-line-height-lg;
}
.form-control+.select2-container--default .select2-selection--single .select2-selection__rendered {
line-height: $input-line-height;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment