bug: clear button does not change color when color is set on item

[Mathieu-COSYNS]

Prerequisites

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

Describe the Feature Request

I recently took a look at issue #19178 and submitted a pull request to solve it #26217 (still pending).

I thought that it could be nice if the clear button could take the color specified on the ion-input element as shown in the picture below.

An other idea that could be more interesting is to change the color base on the text color use. It will provide a better contrast and improve accessibility of color blind people.

Describe the Use Case

Customization of the clear button and/or improvement on color contrast because the current gray color in not very well visible on some background.

Describe Preferred Solution

No response

Describe Alternatives

No response

Related Code

No response

Additional Information

Current behavior

[liamdebeasi]

Thanks for the report. Is this a different request than #19178?

[Mathieu-COSYNS]

Thanks for the report. Is this a different request than #19178?

In #19178 @SidiBecker wish to change the color of the clear button by setting the --ion-color-step-600 prop in CSS.

What I would like to have is, in case of the first screen, that the color change base on the ion-input color attribute like at . In the case of the second screen I don't know how it could be achieved but the color should changed base on the color contrast provided by the who wrap around the .

[liamdebeasi]

Hey there,

Apologies for the delay. We have some changes coming in Ionic 7 that revise the way the color property works on components such as ion-input. In particular, the color property will only modify the caret color and the border/highlight on outline/solid styles. This is done to more closely align with both the iOS and MD specifications. As a result, the text color will no longer change with the color property. This means the proposed feature should not be added as the input text and clear button would no longer be in alignment.

However, I do think the clear button should change color when setting color on ion-item as the input text color already changes. I will put up a PR to address this shortly.

[liamdebeasi]

Thanks for the issue. This has been resolved via #26592, and a fix will be available in an upcoming release of Ionic Framework.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. 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.