Utilities for suppressing native form control styling.

React propsCSS Properties
appearance={keyword}appearance: {keyword};


Use appearance="none" to reset any browser specific styling on an element. This utility is often used when creating custom form components.

<> <option>Yes</option> <option>No</option> <option>Maybe</option> </> < appearance="none"> <option>Yes</option> <option>No</option> <option>Maybe</option> </>


To control an element's appearance at a specific breakpoint, use responsive object notation. For example, adding the property appearance={{ md: "none" }} to an element would apply the appearance="none" utility at medium screen sizes and above.

<x.div appearance={{ md: 'none' }} />

For more information about xstyled's responsive design features, check out Responsive Design documentation.

Edit this page on GitHub