bug: Custom CSS Properties Not Applying to ion-input with "fill" Attribute

[MustafaBaban]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

I've encountered an issue where several custom CSS properties do not seem to affect the ion-input component as expected when its fill attribute is set to either solid or outline. The specific custom properties in question are --border-radius, --padding-start, --padding-end, and --background (background for solid only). Despite setting these properties in my CSS, the ion-input component does not reflect the corresponding changes.

Expected Behavior

The ion-input component should correctly apply the styles defined by the custom CSS properties --border-radius, --padding-start, --padding-end, and --background, reflecting changes in border radius, padding, and background color accordingly.

Steps to Reproduce

1. Add an ion-input element to a page with the fill attribute set to either solid or outline.

2. Apply custom CSS properties to the ion-input element, such as --border-radius, --padding-start, --padding-end, and --background.

3. Observe that the ion-input does not display the expected styles defined by these custom properties.

Code Reproduction URL

https://stackblitz.com/edit/azzuud

Ionic Info

7.x on stackblitz

Additional Information

No response

[MustafaBaban]

I plan on creating a pull request for this Issue

[sean-perkins]

Hello @MustafaBaban thanks for this issue.

The problem you are experiencing is related to CSS specificity. The Ionic Framework implementation applies the styles to an .input-fill-solid class that has a higher specificity than your .custom-input class.

Applying a more specific selector, such as:

.custom-input.md {

will result in the styles applying as expected.

[MustafaBaban]

Thank you for your quick answer and guidance on the CSS specificity issue

While your suggestion is valid, it requires an additional class not mentioned in the documentation.

To maintain consistency with the Ionic documentation and improve developer experience, may I propose submitting a PR myself to address this?

I believe a slight adjustment could help others facing the same issue, ensuring styles apply as expected without extra specificity. Would that be ok?

[sean-perkins]

@MustafaBaban could you share what your suggestion for a PR would include? I want to make sure you aren't investing time into a path we may not accept.

[MustafaBaban]

Hey @sean-perkins,

It looks like I won't be able to get to that PR. Really sorry about that. I was looking forward to contributing, but it seems like it's not in the cards right now.

I'm still hoping the issue with the ion-input fill custom CSS properties gets some attention. Just won't be able to tackle it myself at the moment. Sorry <3

[sean-perkins]

@MustafaBaban can you share what your suggestions would have been? At this time I do not believe this to be a bug with Ionic Framework and plan to close as a result.

CSS specificity is expected when targeting element selectors that Ionic Framework internally styles.

[ionitron-bot]

Thanks for the issue! This issue is being closed due to the lack of a reply. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Thank you for using Ionic!