Appearance

Utilities for suppressing native form control styling.

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

Usage

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

Default browser styles applied
Default styles removed
<x.select> <option>Yes</option> <option>No</option> <option>Maybe</option> </x.select> <x.select appearance="none"> <option>Yes</option> <option>No</option> <option>Maybe</option> </x.select>

Responsive

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