bootstrap5-tags/tags-pure.css

Replace select[multiple] with nices badges for Bootstrap 5

.form-control-focus,
.form-control:focus {
  color: var(--bs-body-color, #212529);
  background-color: var(--bs-form-control-bg, var(--bs-body-bg, #fff));
  border-color: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.5);
  outline: 0;
  box-shadow: 0 0 0 var(--bs-focus-ring-width) rgba(var(--bs-primary-rgb, 13, 110, 253), 0.25);
}

.was-validated :valid + .form-control-focus,
.was-validated :valid + .form-control:focus {
  border-color: var(--bs-success, #198754);
  box-shadow: 0 0 0 var(--bs-focus-ring-width) rgba(var(--bs-success-rgb, 25, 135, 84), 0.25);
}

.was-validated :invalid + .form-control-focus,
.was-validated :invalid + .form-control:focus {
  border-color: var(--bs-danger, #dc3545);
  box-shadow: 0 0 0 var(--bs-focus-ring-width, 0.25rem) rgba(var(--bs-danger-rgb, 220, 53, 69), 0.25);
}

.form-floating .form-control.form-placeholder-shown:not(.form-control-focus) ~ label {
  opacity: unset;
  transform: unset;
}

.form-floating .form-control ~ label {
  z-index: unset;
}

.form-control-disabled {
  background-color: var(--bs-form-control-disabled-bg, var(--bs-secondary-bg, #e9ecef));
  opacity: 1;
}

.tags-menu mark {
  text-decoration: underline;
  background: none;
  color: currentColor;
  padding: 0;
}

.form-control.is-max-reached {
  background-image: none;
}