Appearance
Utilities to disable the styling of the original form controls.
| Utility | Properties |
|---|---|
| Error: 429 | |
Auto
This example sets the appearance to auto. The a-auto utility allows the element to use the default styling provided by the browser, which can vary based on the element type and the user’s operating system.
<button class="a-auto px-5 py-1">Send</button>None
Initial value
This example sets the appearance to none. The a-none utility removes all default styling from the element.
<button class="a-none px-5 py-1">Send</button>Conditional styles
Learn how to override existing utilities based on the user’s screen size or other factors, such as hover states.
Media modifier
You can combine responsive breakpoints like sm:-*,md:-*, lg:-*, and xxl:-* allows targeting specific utilities in different viewports.
<div class="a-none md:a-auto ..."></div>Hover modifier
Alternatively, you can apply :hover by using h:-* utility to override elements and change their values when hovering over them.
<div class="a-none h:a-auto ..."></div>