Bulma css with select2 jquery plugin

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 bo

Answer 1

I made it work, maybe my example can help you.

View

    Hair
    

        
            @foreach (config('post.cat.hair') as $id => $value)
                {{ __($value) }}
            @endforeach
        
    

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 ^^