bbb2f41591
- Created `openspec-ff-change` skill for fast-forward artifact creation. - Introduced `openspec-new-change` skill for structured change creation. - Developed `openspec-onboard` skill for guided onboarding through OpenSpec workflow. - Added `openspec-sync-specs` skill for syncing delta specs to main specs. - Implemented `openspec-verify-change` skill for verifying implementation against change artifacts. - Updated `.gitignore` to exclude OpenSpec generated files. - Added `skills-lock.json` to manage skill dependencies.
77 lines
2.1 KiB
Markdown
77 lines
2.1 KiB
Markdown
---
|
|
name: effects-form-controls
|
|
description: Form control styling with accent-color, appearance, caret-color, and resize
|
|
---
|
|
|
|
# Form Controls & Input Styling
|
|
|
|
Utilities for styling form controls: accent color, native appearance, caret color, and resize behavior.
|
|
|
|
## Usage
|
|
|
|
### Accent color
|
|
|
|
Control the accent color of checkboxes, radio buttons, range inputs, and progress:
|
|
|
|
```html
|
|
<input type="checkbox" class="accent-pink-500" checked />
|
|
<input type="radio" class="accent-rose-500" name="opt" />
|
|
<input type="range" class="accent-indigo-500" />
|
|
|
|
<!-- Opacity modifier -->
|
|
<input type="checkbox" class="accent-purple-500/75" />
|
|
```
|
|
|
|
### Appearance
|
|
|
|
Remove native form control styling for custom designs:
|
|
|
|
```html
|
|
<!-- Custom select with overlay icon -->
|
|
<div class="grid">
|
|
<select class="col-start-1 row-start-1 appearance-none bg-gray-50 ...">
|
|
<option>Yes</option>
|
|
</select>
|
|
<svg class="pointer-events-none col-start-1 row-start-1 ...">...</svg>
|
|
</div>
|
|
|
|
<!-- Restore default in forced-colors mode (accessibility) -->
|
|
<input type="checkbox" class="appearance-none forced-colors:appearance-auto" />
|
|
```
|
|
|
|
### Caret color
|
|
|
|
Set the text input cursor color:
|
|
|
|
```html
|
|
<textarea class="caret-pink-500">Focus to see caret</textarea>
|
|
<input class="caret-blue-500" />
|
|
```
|
|
|
|
### Resize
|
|
|
|
Control textarea resize behavior:
|
|
|
|
```html
|
|
<textarea class="resize-y">Vertical only</textarea>
|
|
<textarea class="resize-x">Horizontal only</textarea>
|
|
<textarea class="resize">Both directions</textarea>
|
|
<textarea class="resize-none">No resize handle</textarea>
|
|
```
|
|
|
|
## Key Points
|
|
|
|
- `accent-*` - theme colors for checkboxes, radio, range; use `accent-[#hex]` or `accent-(--var)` for custom
|
|
- `appearance-none` - remove native styling (custom selects, checkboxes)
|
|
- `appearance-auto` - restore default (e.g. for `forced-colors: active`)
|
|
- `caret-*` - theme colors for input cursor; matches text color patterns
|
|
- `resize` - both; `resize-x` - horizontal; `resize-y` - vertical; `resize-none` - no handle
|
|
|
|
<!--
|
|
Source references:
|
|
- https://tailwindcss.com/docs/accent-color
|
|
- https://tailwindcss.com/docs/appearance
|
|
- https://tailwindcss.com/docs/caret-color
|
|
- https://tailwindcss.com/docs/resize
|
|
-->
|