Input
The .glass-input utility class for styling non-input elements with glass form styling.
Use .glass-input when you need input styling on an element that isn’t a standard form input (e.g., a contenteditable div).
Preview
Editable div with glass-input
Usage
<div class="glass-input" contenteditable="true">Editable content</div>
<input class="glass-input" type="text" placeholder="Also works on inputs" />States
| State | Behavior |
|---|---|
| Default | Frosted glass with subtle inset shadow |
| Placeholder | --glass-text-muted color |
| Focus | Accent glow ring, brighter background |
| Disabled | opacity: 0.5, cursor: not-allowed |
CSS Properties
| Property | Value |
|---|---|
| Background | rgba(255, 255, 255, 0.15) with blur(8px) |
| Border | 1px solid var(--glass-border) |
| Border Radius | var(--glass-radius-md) (14px) |
| Padding | 0.75rem 1rem |
| Font | Inherited, 0.95rem |
| Width | 100% |
| Inset Shadow | inset 0 1px 2px rgba(0, 0, 0, 0.03) |
| Focus Ring | 0 0 0 3px rgba(accent, 0.25) + accent border |