Incorrect font-size in input box when "value" is null

[qcybb]

Prerequisites

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

Describe the issue

When the web browser auto fills the input box form fields, the font size is quite small. The font size returns to normal when you click anywhere on the screen or in the input box.

I noticed that this behavior happens when the input value="" but, there is text in the box (from the auto-fill form fields).

Once "value" contains a value, the font-size returns to normal.

Reduced test cases

This issue is happening in v5.3.8 (did not happen in 5.3.3)

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

Windows

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

Microsoft Edge

What version of Bootstrap are you using?

5.3.8

[coliff]

I can reproduce the issue on this URL: https://getbootstrap.com/docs/5.3/examples/checkout/ It only shows the smaller font size when selecting an autofill and changes to correct size without needing any user interaction. The same thing happens on https://getbootstrap.com/docs/5.0/examples/checkout/ too - so I don't think it's a recent issue and I suspect it's more of a browser issue rather than a Bootstrap bug.

Screenshot showing autofill data (has smaller input text)

...Once Saved Info is selected it changes to correct size

[alpadev]

This is most likely something we can't change. I'd consider this a security issue if some bad actor was to able to change the font size to something that isn't visible e.g. because it's super tiny. In that case they might be able to exploit the auto fill in a way, that might make it possible to steal sensitive information unnoticed. It also looks like the text is lowercase for some reason on the screenshot coliff shared. I couldn't find any information but maybe browser vendors hardened the security? I only remember reading about password manager extension to be exploited lately.

Update - I checked the browser stylesheet to see if there is any hint. There is some '-internal-autofill' stuff but they don't define a font-size there, and doing so in the dev-tools doesn't have any impact on the preview (at least not in my case).

input:-internal-autofill-previewed,
input:-internal-autofill-selected,
textarea:-internal-autofill-previewed,
textarea:-internal-autofill-selected,
select:-internal-autofill-previewed,
select:-internal-autofill-selected {
  appearance: menulist-button;
  background-image:none !important;
  background-color: light-dark(#E8F0FE, rgba(70,90,126,0.4)) !important;
  color: FieldText !important;
}

Also setting a font-size on html/body/* doesn't have any impact on the rendering of the preview (even with !important). So I don't think there is a way for us to change that.

[qcybb]

My apologies, I believed this was a bootstrap issue. I was prompted to log in to WordPress admin panel tonight (which is not running bootstrap), and the issue was even more pronounced there.

Thank you for your time.

[alpadev]

No worries! It's always worth investigating if there are any accessibility concerns, but unfortunately I feel we're out of luck on this one.