.form-control-sm and .custom-select-sm give different font size/padding

[alecpl]

I expect these two to give the same font-size and left-padding:

<select class="form-control form-control-sm">
  <option>Small select</option>
</select>
<select class="custom-select custom-select-sm">
  <option>Small select</option>
</select>

https://jsfiddle.net/6oj656wb/

[alecpl]

And in *-lg variant left padding is different https://jsfiddle.net/6oj656wb/1/

[alecpl]

And BTW, left padding is inconsistent with inputs https://jsfiddle.net/6oj656wb/2/

[mdo]

Nearly everything between our custom components is different, why would there be an expectation to keep these the same values? I'm inclined to leave them as-is.

[alecpl]

Because if I use input.form-control-sm together with select.custom-select-sm in my forms they do not look consistent. And I want to use custom selects instead of just form-controls because it looks just nicer.

[Johann-S]

Just a quick note maybe @alecpl you should upgrade to our latest release 4.1.1: https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css

[alecpl]

Updated, no visible difference. https://jsfiddle.net/6oj656wb/3/

[RobertSmits]

I can confirm this issue, and that it has been around since the beta.
The padding of the custom-select and -sm and -lg variants is different from the form-control and variants padding.

So is the font size: form-control-sm has font-size: .875rem and custom-select-sm has font-size: 75%

And in a form this font size difference is very noticeable.

[MedShake]

Fix it temporary with :

<select class="custom-select form-control form-control-sm">
  <option>Small select</option>
</select>