On my form using Bootstrap with Firefox browser, the select control is missing its arrow icon on the right side:
https://i.sstatic.net/HcFf6.png
The HTML code I used for this element is as follows:
<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>
I have applied the following CSS to these elements:
body {
font-size: 20px;
}
.form-control {
padding-top: 6px;
}
.lbl {
padding-top: 6px;
}
Using the form-control class was intended to make the select control align with other controls styled with Bootstrap, but it currently resembles a text input.
An Update on the Issue
The problem seems to be influenced by the screen resolution settings (as observed in responsive design mode in Firefox). At a resolution of 480 x 854, the select control does not display the arrow icon on the right. However, when viewing at a higher resolution like 1600 x 900, the arrow icon appears as expected. It's crucial for me that the page functions correctly even at narrow resolutions. Here are the meta settings defined in my base page setup:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1,
user-scalable=no">
Please see the result of the fiddle provided in the link below: