fix: overflowing autofill background color in inputs

[MaxLardenois]

Types of change

• Non-breaking change
• Breaking change (fix or feature that would change existing functionality and usage)

Related issues

Closes #3809

Context & Motivation

Fixes a bug where the autofill background was bleeding over the leading icon of inputs

Description

Add background-clip: content-box so the background is not shown on the paddings but still visible (suggestion was
background-clip: text` which would have hidden the fact that the field is autofilled to the user)

Checklists

• I have read the contributing guidelines
• My change follows the developer guide
• My change pass all tests
• My change is compatible with a responsive display
• I have added tests (Javascript unit test or visual) to cover my changes
• My change introduces changes to the documentation that I have updated accordingly
  • Title and DOM structure is correct
  • Links have been updated (title changes impact links)
  • CSS for the documentation
• I have checked all states and combinations of the component with my change
• I have checked all the impacts for the other components and core behavior (grid, reboot, utilities)

Checklist (for Core Team only)

• The changes need to be in the migration guide
• The changes are well displayed in Storybook (be careful if example order has changed for DSM)
• The changes are compatible with RTL
• Manually test browser compatibility with BrowserStack (Chrome 120, Firefox 121, Edge 120, Safari 15.6, iOS Safari, Chrome & Firefox on Android)

Progression (for Core Team only)

• Code review
• Design review
• A11y review
• Commit on main following conventional commit

Live previews

• https://deploy-preview-3811--boosted.netlify.app/

[netlify]

✅ Deploy Preview for boosted ready!

Name	Link
🔨 Latest commit	7f50d8a
🔍 Latest deploy log	https://app.netlify.com/projects/boosted/deploys/6aa7dc473d7645000865012d
😎 Deploy Preview	https://deploy-preview-3811--boosted.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[louismaximepiton]

Looks good to me, not sure we should do it for Select for now

[Copilot]

🔵 Needs a closer look

The .icon padding selector is missing, so autofill backgrounds can still cover leading icons.

Pull request overview

Fixes autofill backgrounds overlapping leading icons in text inputs.

Changes:

• Applies background-clip: content-box to text fields and textareas.
• Updates generated CSS snapshots.

File summaries

File	Description
scss/tests/snapshot-tests/__snapshots__/ouds-web.css	Updates the standard CSS snapshot.
scss/tests/snapshot-tests/__snapshots__/ouds-web-bootstrap.css	Updates the Bootstrap-compatible CSS snapshot.
scss/forms/_text-input.scss	Adds autofill background clipping.

Review details

Files not reviewed (2)

• scss/tests/snapshot-tests/snapshots/ouds-web-bootstrap.css: Generated file
• scss/tests/snapshot-tests/snapshots/ouds-web.css: Generated file

Suppressed comments (1)

scss/forms/_text-input.scss:112

• This only prevents the autofill background from covering icons when the leading icon is an svg/img, because the padding rule below (lines 292-299) does not include the supported > .icon variant. For a leading .icon, the field keeps padding: 0, so background-clip: content-box is effectively the same as border-box and the autofill background still covers the icon; include .icon in that padding selector as part of this fix.

      background-clip: content-box; // fixes https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/issues/3809

• Files reviewed: 1/3 changed files
• Comments generated: 0
• Review effort level: Lite

---

💡 Configure MCP servers for context-aware, tailored reviews. Learn more in the docs.