Appearance
Utilities to disable the styling of the original form controls.
| Utility | Properties |
|---|---|
| a-auto | appearance: auto; |
| a-none | appearance: none; |
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
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.
You can combine responsive breakpoints like sm:a-*,md:a-*, lg:a-*, and xxl:a-* allows targeting specific utilities in different viewports.
<div class="a-none md:a-auto ..."></div>
Alternatively, you can apply :hover by using h:a-* utility to override elements and change their values when hovering over them.
<div class="a-none h:a-auto ..."></div>