Appearance

Utilities for suppressing native form control styling.

React props	CSS 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