Bulma css con el complemento select2 jquery

Luego de consultar especialistas en esta materia, programadores de deferentes ramas y profesores hemos dado con la respuesta al dilema y la dejamos plasmada en este post.

Lo hice funcionar, tal vez mi ejemplo pueda ayudarte.

Vista

    Hair
    

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

HABLAR CON DESCARO A

.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;
                
            
        
    

Resultado

Espero que ayude ^^

.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 
        
      
    
  

Abro tema sobre esto.

https://github.com/jgthms/bulma/issues/1555

Reseñas y puntuaciones de la guía

Si eres capaz, eres capaz de dejar una sección acerca de qué le añadirías a este post.

---

---

Utiliza Nuestro Buscador