search

apalfrey / select2-bootstrap-5-theme

A Select2 v4 theme for Bootstrap 5
https://apalfrey.github.io/select2-bootstrap-5-theme/
MIT License
212 stars 48 forks source link

The magnifying glass image and the CSS to display it seem to be missing from all the v4 e v5 themes. #68

Open fulviocanducci opened 2 years ago

fulviocanducci commented 2 years ago

Ref: https://github.com/select2/select2/issues/4629#issuecomment-312771486

I miss this feature too. The magnifying glass image and the CSS to display it seem to be missing from all the v4 themes. My workaround was to lift select2.png and select2x2.png from the v3 files and insert the following CSS into my application:

.select2-container--default .select2-search--dropdown .select2-search__field {
  background: url(select2.png) right top no-repeat;
  background-position: right -22px;
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 2dppx)  {
   .select2-container--default .select2-search--dropdown .select2-search__field {
      background-image: url(select2x2.png);
      background-repeat: no-repeat;
      background-size: 60px 40px;
      background-position: 100% -21px;
   }
}

select2 select2x2

I notice that some people have made their own themes that put the icon back. For example, this Yii2 integration: http://demos.krajee.com/widget-details/select2

Originally posted by @rohanc in https://github.com/select2/select2/issues/4629#issuecomment-312771486

apalfrey commented 2 years ago

I can take a look at it, but I'll have to set it so that it's disabled by default. When it's implemented, all you'd have to do is enable it in _variables.scss and recompile the theme.