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

.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