Bulma css with select2 jquery plugin - jquery-select2

Question

I tried to implement select2 plugin using the Bulma css framework but it seems messy in frontend. I tried this using bootstrap and yes there's no problem since select2 has a bootstrap compatibility.
HTML:
<div class="field">
<label class="label">Role</label>
<p class="control">
<span class="select is-fullwidth">
<select2 v-model="form.role"
placeholder="Select Role"
name="role"
:value="form.role"
:multiple="false"
>
<option></option>
<option v-for="role in roles" :value="role.id">{{ role.display_name }}</option>
</select2>
</span>
</p>
</div>

Answer 1

I made it work, maybe my example can help you.
View
<div class="field">
<label class="label">Hair</label>
<div class="control">
<select2 class="is-medium" v-model="post.custom_data.hair" :options="{}">
#foreach (config('post.cat.hair') as $id => $value)
<option value="{{ $id }}">{{ __($value) }}</option>
#endforeach
</select2>
</div>
</div>
SASS
.select2-wrapper {
.select2-container {
.select2-selection {
transition: border-color $speed;
font-family: $family-sans-serif;
height: 2.285em;
line-height: 1.5;
font-size: 1rem;
outline: none !important;
display: inline-flex;
align-items: center;
width: 100%;
border-color: $border;
border-radius: $radius;
&:hover {
border-color: $border-hover;
}
.select2-selection__rendered {
padding-left: 0.75em;
padding-right: 0.75em;
}
.select2-selection__arrow {
display: none;
}
}
&.select2-container--open {
.select2-selection {
border-color: $primary;
&:hover {
border-color: $primary;
}
}
}
}
&.is-medium {
.select2-container {
.select2-selection {
font-size: $size-5;
}
}
}
&.is-large {
.select2-container {
.select2-selection {
font-size: $size-4;
}
}
}
}
.select2-container {
.select2-dropdown {
border-color: $primary;
.select2-search {
margin: 10px;
.select2-search__field {
#extend .input;
border-radius: $radius !important;
}
}
.select2-results__options {
max-height: 210px;
.select2-results__option {
padding: 0.75em;
font-family: $family-sans-serif;
font-size: 1rem;
&.select2-results__option--highlighted {
background: $primary;
}
}
}
}
}
Result
Hope it helps ^^

Answer 2

.select2-container {
.select2-selection--single {
height: auto !important;
padding: 3px 0 !important;
border: 1px solid #dbdbdb !important;
.select2-selection__arrow{
top: 5px !important;
}
.select2-selection__placeholder {
color: #dbdbdb !important;
}
}
.select2-dropdown {
border: 1px solid #dbdbdb !important;
border-top: 0 !important;
.select2-search {
margin: 5px;
.select2-search__field {
padding: 10px !important;
border-radius: 3px !important;
font-size: 1rem;
height: 2.25em;
box-shadow: inset 0 1px 2px rgba(10,10,10,.1);
max-width: 100%;
width: 100%;
border-radius: 3px !important;
}
}
.select2-results__options {
max-height: 200px !important;
.select2-results__option {
padding: 0.37em 0.75em !important;
font-size: 1rem;
&.select2-results__option--highlighted {
}
}
}
}
}
I open issue about this.
https://github.com/jgthms/bulma/issues/1555