I'm facing a challenge that has me stumped. I have a form with a text input and a select drop-down, all styled using Bootstrap 5. My goal is to reduce the default left padding on these form controls by adding padding-left:0.3rem to my style definitions. Here's an example of my code:
.form-control,
.form-select {
padding-left: 0.3rem;
}<head>
<title>Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="abc9c4c4dfd8dfd9cadbeb9e859a8599">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="89ebe6e6fdfafdfbe8f9c9bca7b8a7bb">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<form style="width:200px">
<label for="name" class="form-label">Name:</label>
<input type="text" class="form-control" id="name" name="name" value="John">
<label for="country" class="form-label">Country:</label>
<select class="form-select" id="country" name="country">
<option>USA</option>
<option>South Africa</option>
<option>Sweden</option>
<option>Netherlands</option>
</select>
</form>
</div>
</body>I want both "John" and "USA" to be aligned with the same padding in their form controls. However, as shown in the image below, "USA" has more padding than "John". What could be causing this discrepancy, and how can I resolve it?
https://i.sstatic.net/EXKRf.png
UPDATE: Upon testing across different browsers, I've discovered that this issue only occurs in Firefox. Chrome and Edge display the correct padding and alignment. Is there a CSS trick I can use to ensure consistency in Firefox as well?