Quick implementation
/* Base input styling */
input {
padding: 0.65rem 0.85rem;
border: 1px solid oklch(0.35 0.02 260);
border-radius: 0.375rem;
background-color: oklch(0.13 0.02 260);
color: var(--text);
transition: all 150ms ease-out;
}
/* Type-specific styles */
input[type="text"] {
border-color: oklch(0.50 0.15 200);
}
input[type="email"] {
border-color: oklch(0.50 0.18 30);
}
input[type="password"] {
border-color: oklch(0.50 0.15 135);
}
input[type="number"] {
border-color: oklch(0.50 0.18 95);
}
/* Focus states with matching colors */
input[type="text"]:focus {
outline: none;
border-color: oklch(0.65 0.20 200);
box-shadow: 0 0 0 3px oklch(0.65 0.20 200 / 0.1);
}
input[type="email"]:focus {
outline: none;
border-color: oklch(0.65 0.25 30);
box-shadow: 0 0 0 3px oklch(0.65 0.25 30 / 0.1);
}
input[type="password"]:focus {
outline: none;
border-color: oklch(0.65 0.20 135);
box-shadow: 0 0 0 3px oklch(0.65 0.20 135 / 0.1);
}
input[type="number"]:focus {
outline: none;
border-color: oklch(0.65 0.25 95);
box-shadow: 0 0 0 3px oklch(0.65 0.25 95 / 0.1);
}Prompt this to your LLM
Includes role, constraints, two framework variants, and edge cases to handle.
You are a senior frontend engineer. Your task is to create a type-aware input styling system.
Role & Goal:
Build a CSS system that applies distinct visual styles to HTML input elements based on their type attribute. Each input type (text, email, password, number, url, etc.) should have its own color scheme and interactive feedback, making the form more intuitive and visually organized.
Technical Constraints:
1. Use CSS attribute selectors (input[type="X"]) exclusively
2. Apply unique oklch() border/focus colors for at least 4 input types
3. Include consistent focus states with box-shadow feedback
4. Base styles should apply to all inputs, type selectors override only specific properties
5. Avoid JavaScript — purely CSS solution
Vanilla CSS implementation:
input { /* base styles */ }
input[type="text"] { border-color: oklch(...); }
input[type="email"] { border-color: oklch(...); }
input[type="password"] { border-color: oklch(...); }
input[type="number"] { border-color: oklch(...); }
React/TypeScript variant:
Create an InputField component that accepts type prop and renders an input with class-based or CSS-in-JS styling that adapts to the input type. Map type to a color theme config.
Edge cases to handle:
1. Unsupported input types should fall back to base styling
2. Placeholder text color should be accessible across all type-specific colors
3. Disabled state styling (opacity/grayscale)
4. Filled vs. empty states (optional CSS-based visual distinction)
5. Readonly inputs that shouldn't have focus styles
6. Invalid/valid state indicators layered on top of type styling
7. High-contrast mode for users with visual impairmentsWhy this matters in 2026
Forms are mission-critical UI elements, yet many developers style all inputs identically. By leveraging CSS attribute selectors like input[type="email"], you can provide semantic visual feedback — users instantly understand what data a field expects based on its color. This reduces errors and improves accessibility.
Type-based styling also makes it easier to maintain large forms: change the color scheme for all email fields globally without touching HTML or JavaScript, and ensure consistency across your entire application.
The logic
CSS attribute selectors match HTML attributes: input[type="email"] selects any input with type="email". By styling the base input element first, then using type selectors to override specific properties (border-color, box-shadow), you layer visual distinctions cleanly.
Each type gets its own oklch() color with a unique hue: text (200°), email (30°), password (135°), number (95°). The focus state amplifies the lightness and saturation while maintaining the same hue, creating a cohesive visual theme that's intuitive and accessible.
Accessibility & performance
Type-based styling is pure CSS with zero JavaScript overhead. It respects :focus for keyboard navigation and provides clear visual feedback via box-shadow. Ensure sufficient color contrast between the field color and background (WCAG AA standard is 4.5:1). Test with @media (prefers-color-scheme: light/dark) to verify visibility in both modes.
For users with color blindness, consider adding icons or text labels alongside colors. The 135° (purple) for password and 30° (orange) for email provide good hue separation for deuteranopia and protanopia.