Premise

In order to ensure consistent display of selects across Windows, Linux, and Mac in my project, I have implemented the following combination:

• tom-select v2.0.1 JavaScript library;
• Bootstrap v5.1.3 frontend framework;
• Symfony v5.4.5 backend framework.

I have configured SCSS files for bootstrap and tom-select.

The frontend packages are managed using the Yarn package manager.

I utilize SCSS for customizing Bootstrap variables to create different themes within the site.

My setup with Symfony and Webpack Encore involves separate handling of SCSS and JS (CSS is not bundled with JavaScript). The CSS is compiled from SCSS that includes tom-select SCSS.

The webpage contains CSS (Bootstrap + customized themes + tom-select) and JS (bootstrap and tom-select independently).

Problem

1. The select displays with a smaller than default box-shadow in Bootstrap 5.
2. The height of the select element is +2px larger than default in Bootstrap 5.
3. The dropdown of the select element starts further away from its field compared to default in Bootstrap 5.

Issues number 2 and 3 are minor inconveniences, but the first one is considered a significant problem.

Illustration

https://i.sstatic.net/jTvFe.png

Things I have tried

1. Attempted to redefine the tom-select variable $input-focus-width, but it did not resolve the issue;
2. Experimented with different arrangements of includes in the main SCSS override, but the problems persisted;
3. Introduced additional CSS rules (see Update 1)

Code

Main SCSS override

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";

$input-border-color: $gray-500;
$form-select-border-color: $gray-500;
$input-group-addon-border-color: $gray-500;
<input-focus-width: 0.25rem; /* has no effect on tom-select */

@import "~bootstrap/scss/bootstrap";
@import "~tom-select/src/scss/tom-select.bootstrap5";

Main SCSS imports override

@import "./main_override";

body
{
    background: #f0ede8 !important;
}

/* other styles follow */

TWIG template (page that includes compiled CSS)

{% extends 'base_admin.html.twig' %}

{% block title %}New firm{% endblock %}

{% block stylesheets %}
    {{ parent() }}
{% endblock %}

{% block javascripts %}
    {{ parent() }}

    {{ encore_entry_script_tags('tom_select') }}
{% endblock %}

{% block main_content %}
    <div class="wrapper">
        <h3 class="fix text-center">{% trans from 'menu' %}menu.firm.new{% endtrans %}</h3>

        <div class="container">
            <div class="inner-container">
                <div class="box-list clearfix">
                    {% if form is defined %}
                        {{ form_start(form, {'attr': {'id': 'form-firm-create', 'novalidate': 'novalidate', 'autocomplete': 'off'}, 'method': 'POST'}) }}
                            <div class="field-group">
                                {{ form_row(form.isSpecial, {'label_attr': {'class': 'form-group-label'}, 'attr': {'class': 'form-control'}}) }}
                            </div>
                            <div class="box-btn form-group text-center box-submit">
                                <a class="btn btn-secondary me-1" href="{{ path('firm_list') }}">
                                    <i class="fas fa-long-arrow-left"></i>
                                    <span>{%- trans from 'firms' %}firms.goToList{% endtrans -%}</span>
                                </a>
                                {{ form_widget(form.firmCreate) }}
                            </div>
                        {{ form_end(form) }}
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
{% endblock %}

JavaScript executed on the page

"use strict";

import TomSelect from "tom-select/dist/js/tom-select.complete.min.js";

$(function()
{
    new TomSelect("#firm_create_isSpecial", {
        allowEmpty: false,
        create: false,
        sortField: {
            direction: "asc",
            field: "text"
        }
    });
});

Conclusion

What am I missing?

Is there an error in my configuration?

Thank you for any ideas and suggestions.

Update 1

By adding the following rules, I achieved a uniform width box-shadow and correct inner border color, although a slight flash occurs when clicking due to a 2px increase in width to match the control's proper width.

Added CSS rules

.ts-wrapper.form-select .ts-control,
.ts-wrapper.form-select.focus .ts-control
{
	border: 1px solid #fff !important;
}

.ts-wrapper.form-select.single.input-active .ts-control
{
	border: 1px solid #ccc !important;
}

.ts-wrapper.form-select.single.input-active.focus .ts-control
{
	border: 1px solid #86b7fe !important;
}

.my-ts-select.focus .ts-control,
.my-ts-select:focus .ts-control
{
	border: 1px solid #86b7fe !important;
	box-shadow: 0 0 0 .25rem #b7d5ff !important;
	outline: 0;
	width: calc(100% + 2px);
	margin-left: -1px;
}

.ts-control
{
	border: none !important;
}

I believe the provided CSS rules can be optimized. Feel free to share your suggestions.

Update 2

After making more modifications to the CSS, I found that removing the class form-select from the rendered field aligns the tom-select control with bootstrap styling without additional adjustments!