How to style the clear button inside SearchField?

[Taloqq]

I cant figure it out sorry

[reidbarber]

For the SearchField in React Aria Components:

You can style the Button that is within the SearchField.

You can target the element with the selector .react-aria-Input .react-aria-Button .react-aria-SearchField .react-aria-Button, or use any of the styling methods mentioned in the Styling docs.

For the SearchField in React Spectrum:

Styling this isn't supported in order to maintain consistency with the design system.

[Taloqq]

@devongovett That does not work either. The button itself is also invisible in the DOM upon inspecting the input field.

[snowystinger]

Have you typed anything into the input? It should only appear when there is text that can be cleared.

[Taloqq]

@snowystinger Yes, it only appears when there is input. I am trying to change its style, because blue isn't in this projects color palette. I think the default color should be a more neutral color like black, anyway.

[snowystinger]

Can you provide a codesandbox or stackblitz showing the problem?

[uncvrd]

I think they are referring to the browser default (like in chrome) that adds an "X" to type="search" automatically. To remove it and use your own button, I've added this to my stylesheet. which seems to work.

    input[type="search" i]::-webkit-search-cancel-button {
        -webkit-appearance: none;
        appearance: none;
        display: none;
    }