select2 no muestra el icono de flecha hacia abajo

Puede que se de el caso de que encuentres algún fallo con tu código o trabajo, recuerda probar siempre en un entorno de testing antes aplicar el código al trabajo final.

Solución:

Ha utilizado el menú desplegable de selección múltiple y el complemento usado (Select2) no agregue la flecha desplegable en el menú desplegable de selección múltiple. Entonces, si desea agregar una flecha desplegable, debe agregar un CSS personalizado como se muestra a continuación.

ul.select2-choices 
    padding-right: 30px !important;


ul.select2-choices:after 
    content: "";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    border-top: 5px solid #333;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;

Para la versión 4.0.5+ de Select2, este código duplica exactamente la flecha de selección única.

.select2-selection--multiple:before 
    content: "";
    position: absolute;
    right: 7px;
    top: 42%;
    border-top: 5px solid #888;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;

$(function () 
  $("#select1").select2();
);

.select2-container--default .select2-selection--multiple:before 
    content: ' ';
    display: block;
    position: absolute;
    border-color: #888 transparent transparent transparent;
    border-style: solid;
    border-width: 5px 4px 0 4px;
    height: 0;
    right: 6px;
    margin-left: -4px;
    margin-top: -2px;top: 50%;
    width: 0;cursor: pointer


.select2-container--open .select2-selection--multiple:before 
    content: ' ';
    display: block;
    position: absolute;
    border-color: transparent transparent #888 transparent;
    border-width: 0 4px 5px 4px;
    height: 0;
    right: 6px;
    margin-left: -4px;
    margin-top: -2px;top: 50%;
    width: 0;cursor: pointer

  Alabama
  Amalapuram
  Anakapalli
  Akkayapalem
  Wyoming

Fuente: https://github.com/select2/select2/issues/167#issuecomment-322461384

Si aceptas, tienes la habilidad dejar una reseña acerca de qué le añadirías a esta noticia.

---

---

Utiliza Nuestro Buscador