Select control is missing its arrow icon on a form using Bootstrap (with Firefox browser)

Question

I have a select control on a form using Bootstrap (with Firefox browser), but it is missing its arrow icon on the right:

Here is the relevant HTML I used:

<div class="container-fluid">
    <form id="form" method="post" action="process.php">
        <div class="form-group">
            <label class="lbl" for="choose">Choose</label>
            <select class="form-control" id="choose" name="choose" required>
                <option value="Foo">Foo</option>
                <option value="Bar">Bar</option>
            </select>
        </div>
        <input type="submit" name="button" value="Submit" class="btn-primary">
        <input type="button" name="cancel" value="Cancel" class="btn-primary" onclick="clkcnc();">
    </form>
</div>

This is the only CSS I used on these elements:

body {
    font-size: 20px;
}
.form-control {
    padding-top: 6px;
}
.lbl {
    padding-top: 6px;
}

I wanted to use the form-control class to make the control look like other controls when using Bootstrap on my forms, but this select control looks more like a text input.

Update

This problem is related to using a different resolution (via responsive design mode in Firefox). In my case the resolution is 480 x 854. When I turn off the mode, so the browser is displaying within a screen resolution of 1600 x 900, the select control appears as normal with the arrow icon on the right. Unfortunately I need the page to work in a narrow resolution. Here are the meta settings in my base page set up:

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, 
user-scalable=no">

Here is the result of the fiddle from link2pk below:

Answer 1

try form-select instead of form-control if using Bootstrap v5 (see: https://getbootstrap.com/docs/5.0/forms/select/ )