Outer right border radius not applied to datalist in an input group

[omishah]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

Issue: Outer top-right and bottom-right border radius not applied to input (datalist) when used with the input-group class.

Inshort: border-top-right-radius and border-bottom-right-radius properties are set to 0 instead of default value of --bs-border-radius.

Code:

<div class="input-group">
    <span class="input-group-text">#</span>

    <input list="datalistOptions" class="form-control datalist" placeholder="Choose or type an option">

    <datalist id="datalistOptions">
        <option value="abc">abc</option>
        <option value="...">...</option>
        <option value="xyz">xyz</option>
    </datalist>
</div>

Preview:

Reduced test cases

Fix:

When manually setting respective radius, it works fine:

input.datalist {
    border-top-right-radius: var(--bs-border-radius) !important;
    border-bottom-right-radius: var(--bs-border-radius) !important;
}

Preview:

What operating system(s) are you seeing the problem on?

macOS

What browser(s) are you seeing the problem on?

Chrome

What version of Bootstrap are you using?

v5.3.3

[TommasoAllegretti]

With input groups, the border radius style is applied to the first and last children of the element with class="input-group".

In your case the border radius is not displayed correctly because the last child element is actually <datalist> and not <input>, changing the order of those two tags should solve the issue.

[omishah]

With input groups, the border radius style is applied to the first and last children of the element with class="input-group".

In your case the border radius is not displayed correctly because the last child element is actually <datalist> and not <input>, changing the order of those two tags should solve the issue.

Yes, it makes sense i.e changing the order works. But, I guess it's worth mentioning in the official docs. Thanks.

[TommasoAllegretti]

I agree. I will create a PR to add it to the documentation.