CSS Forms 📝
Create beautiful, accessible, and responsive forms with modern CSS techniques and best practices.
Why Style Forms with CSS?
Forms are essential for user interaction, and well-designed forms significantly improve user experience, conversion rates, and accessibility. Modern CSS allows you to create forms that are not only beautiful but also functional and accessible.
🎨 Enhanced UX
Better visual feedback and interactions
📱 Responsive
Works perfectly on all devices
♿ Accessible
Inclusive design for all users
Modern Form Styling
Key Features:
- Floating labels with smooth transitions
- Custom checkboxes and radio buttons
- Styled file inputs and select elements
- Real-time validation feedback
- Consistent focus states
- Mobile-friendly design
Modern Signup Form
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modern CSS Form Styling</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
line-height: 1.6;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 2rem;
display: flex;
justify-content: center;
align-items: center;
}
.form-container {
background: white;
border-radius: 20px;
padding: 3rem;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
max-width: 500px;
width: 100%;
}
.form-header {
text-align: center;
margin-bottom: 2rem;
}
.form-header h1 {
color: #2d3748;
font-size: 2rem;
margin-bottom: 0.5rem;
}
.form-header p {
color: #718096;
}
.form-group {
margin-bottom: 1.5rem;
}
.form-label {
display: block;
margin-bottom: 0.5rem;
font-weight: 600;
color: #2d3748;
}
.form-input {
width: 100%;
padding: 1rem;
border: 2px solid #e2e8f0;
border-radius: 10px;
font-size: 1rem;
transition: all 0.3s ease;
background: white;
}
.form-input:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
transform: translateY(-2px);
}
.form-input:hover {
border-color: #cbd5e0;
}
/* Floating Label Effect */
.floating-group {
position: relative;
margin-bottom: 2rem;
}
.floating-input {
padding: 1.5rem 1rem 0.5rem 1rem;
height: 60px;
}
.floating-label {
position: absolute;
top: 50%;
left: 1rem;
transform: translateY(-50%);
color: #718096;
transition: all 0.3s ease;
pointer-events: none;
}
.floating-input:focus + .floating-label,
.floating-input:not(:placeholder-shown) + .floating-label {
top: 0.5rem;
left: 1rem;
font-size: 0.8rem;
color: #667eea;
font-weight: 600;
}
/* Custom Checkbox */
.checkbox-group {
display: flex;
align-items: center;
margin: 1rem 0;
}
.custom-checkbox {
position: relative;
margin-right: 0.75rem;
}
.custom-checkbox input {
position: absolute;
opacity: 0;
cursor: pointer;
}
.checkmark {
width: 20px;
height: 20px;
background: #f7fafc;
border: 2px solid #e2e8f0;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.custom-checkbox input:checked + .checkmark {
background: #667eea;
border-color: #667eea;
}
.custom-checkbox input:checked + .checkmark::after {
content: "✓";
color: white;
font-size: 0.8rem;
font-weight: bold;
}
/* Custom Radio Buttons */
.radio-group {
display: flex;
gap: 1rem;
margin: 1rem 0;
}
.custom-radio {
position: relative;
flex: 1;
}
.custom-radio input {
position: absolute;
opacity: 0;
}
.radio-label {
display: block;
padding: 1rem;
background: #f7fafc;
border: 2px solid #e2e8f0;
border-radius: 8px;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
}
.custom-radio input:checked + .radio-label {
background: #667eea;
color: white;
border-color: #667eea;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3);
}
/* File Input */
.file-input-wrapper {
position: relative;
overflow: hidden;
display: inline-block;
width: 100%;
}
.file-input {
position: absolute;
left: -9999px;
}
.file-input-label {
display: block;
padding: 1rem;
background: #f7fafc;
border: 2px dashed #cbd5e0;
border-radius: 8px;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
color: #718096;
}
.file-input-label:hover {
border-color: #667eea;
background: #edf2f7;
}
.file-input-label::before {
content: "📁 ";
margin-right: 0.5rem;
}
/* Select Styling */
.select-wrapper {
position: relative;
}
.select-wrapper::after {
content: "▼";
position: absolute;
right: 1rem;
top: 50%;
transform: translateY(-50%);
color: #718096;
pointer-events: none;
}
.form-select {
appearance: none;
width: 100%;
padding: 1rem;
border: 2px solid #e2e8f0;
border-radius: 10px;
font-size: 1rem;
background: white;
cursor: pointer;
}
.form-select:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
/* Submit Button */
.submit-btn {
width: 100%;
padding: 1rem;
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
border: none;
border-radius: 10px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
margin-top: 1rem;
}
.submit-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 16px rgba(102, 126, 234, 0.3);
}
.submit-btn:active {
transform: translateY(0);
}
/* Validation Styles */
.form-input:valid {
border-color: #48bb78;
}
.form-input:invalid:not(:focus):not(:placeholder-shown) {
border-color: #f56565;
}
.error-message {
color: #f56565;
font-size: 0.8rem;
margin-top: 0.25rem;
display: none;
}
.form-input:invalid:not(:focus):not(:placeholder-shown) ~ .error-message {
display: block;
}
/* Responsive Design */
@media (max-width: 480px) {
.form-container {
padding: 2rem 1.5rem;
}
.radio-group {
flex-direction: column;
}
}
</style>
</head>
<body>
<div class="form-container">
<div class="form-header">
<h1>Create Account</h1>
<p>Join us today and get started</p>
</div>
<form id="signupForm">
<!-- Floating Label Input -->
<div class="floating-group">
<input type="text" class="form-input floating-input" id="fullName" placeholder=" " required>
<label for="fullName" class="floating-label">Full Name</label>
<div class="error-message">Please enter your full name</div>
</div>
<!-- Regular Input -->
<div class="form-group">
<label for="email" class="form-label">Email Address</label>
<input type="email" class="form-input" id="email" placeholder="your@email.com" required>
<div class="error-message">Please enter a valid email address</div>
</div>
<!-- Password Input -->
<div class="form-group">
<label for="password" class="form-label">Password</label>
<input type="password" class="form-input" id="password" placeholder="••••••••" required minlength="8">
<div class="error-message">Password must be at least 8 characters</div>
</div>
<!-- Select Input -->
<div class="form-group">
<label for="country" class="form-label">Country</label>
<div class="select-wrapper">
<select class="form-select" id="country" required>
<option value="">Select your country</option>
<option value="us">United States</option>
<option value="ca">Canada</option>
<option value="uk">United Kingdom</option>
<option value="au">Australia</option>
</select>
</div>
</div>
<!-- Radio Buttons -->
<div class="form-group">
<label class="form-label">Account Type</label>
<div class="radio-group">
<div class="custom-radio">
<input type="radio" id="personal" name="accountType" value="personal" checked>
<label for="personal" class="radio-label">Personal</label>
</div>
<div class="custom-radio">
<input type="radio" id="business" name="accountType" value="business">
<label for="business" class="radio-label">Business</label>
</div>
</div>
</div>
<!-- Checkbox -->
<div class="checkbox-group">
<label class="custom-checkbox">
<input type="checkbox" id="terms" required>
<span class="checkmark"></span>
</label>
<label for="terms" class="form-label" style="margin: 0;">
I agree to the <a href="#terms" style="color: #667eea;">Terms and Conditions</a>
</label>
</div>
<!-- File Upload -->
<div class="form-group">
<label class="form-label">Profile Picture (Optional)</label>
<div class="file-input-wrapper">
<input type="file" class="file-input" id="avatar" accept="image/*">
<label for="avatar" class="file-input-label">Choose a file or drag it here</label>
</div>
</div>
<!-- Submit Button -->
<button type="submit" class="submit-btn">Create Account</button>
</form>
<div style="text-align: center; margin-top: 2rem; color: #718096; font-size: 0.9rem;">
Already have an account? <a href="#login" style="color: #667eea;">Sign in</a>
</div>
</div>
<script>
document.getElementById('signupForm').addEventListener('submit', function(e) {
e.preventDefault();
alert('Form submitted successfully! (This is a demo)');
});
// Real-time validation feedback
const inputs = document.querySelectorAll('.form-input');
inputs.forEach(input => {
input.addEventListener('blur', function() {
this.style.animation = 'none';
setTimeout(() => {
this.style.animation = 'shake 0.5s ease-in-out';
}, 10);
});
});
// Add shake animation for invalid fields
const style = document.createElement('style');
style.textContent = `
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
75% { transform: translateX(5px); }
}
`;
document.head.appendChild(style);
</script>
</body>
</html>Animated Forms & Micro-interactions
Smooth Animations
Use CSS transitions and keyframe animations to create engaging form interactions that guide users through the form-filling process.
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
@keyframes slideIn {...}
Material Design
Implement Material Design principles with floating labels, animated underlines, and ripple effects for a modern user experience.
.input:focus + .label { transform: translateY(-100%); }
.underline { transition: width 0.4s; }
Animated Login Form
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated CSS Forms</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
line-height: 1.6;
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
min-height: 100vh;
padding: 2rem;
display: flex;
justify-content: center;
align-items: center;
}
.form-container {
background: white;
border-radius: 20px;
padding: 3rem;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
max-width: 500px;
width: 100%;
animation: slideIn 0.6s ease-out;
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.form-header {
text-align: center;
margin-bottom: 2rem;
}
.form-header h1 {
color: #2d3748;
font-size: 2rem;
margin-bottom: 0.5rem;
animation: fadeIn 0.8s ease-out 0.2s both;
}
.form-group {
margin-bottom: 2rem;
animation: fadeInUp 0.6s ease-out;
}
.form-group:nth-child(2) { animation-delay: 0.1s; }
.form-group:nth-child(3) { animation-delay: 0.2s; }
.form-group:nth-child(4) { animation-delay: 0.3s; }
.form-group:nth-child(5) { animation-delay: 0.4s; }
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.form-label {
display: block;
margin-bottom: 0.5rem;
font-weight: 600;
color: #2d3748;
transition: all 0.3s ease;
}
.animated-input {
width: 100%;
padding: 1rem;
border: 2px solid #e2e8f0;
border-radius: 10px;
font-size: 1rem;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
background: white;
position: relative;
}
.animated-input:focus {
outline: none;
border-color: #4facfe;
box-shadow: 0 0 0 3px rgba(79, 172, 254, 0.1);
transform: scale(1.02);
}
/* Material Design Input */
.material-input {
position: relative;
margin-bottom: 2rem;
}
.material-input input {
padding: 1.5rem 1rem 0.5rem 1rem;
height: 60px;
}
.material-label {
position: absolute;
top: 50%;
left: 1rem;
transform: translateY(-50%);
color: #718096;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
}
.material-input input:focus + .material-label,
.material-input input:not(:placeholder-shown) + .material-label {
top: 0.5rem;
left: 1rem;
font-size: 0.8rem;
color: #4facfe;
font-weight: 600;
transform: translateY(0);
}
.material-underline {
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: #4facfe;
transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.material-input input:focus ~ .material-underline {
width: 100%;
}
/* Animated Button */
.animated-btn {
width: 100%;
padding: 1rem;
background: linear-gradient(135deg, #4facfe, #00f2fe);
color: white;
border: none;
border-radius: 10px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.animated-btn::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s;
}
.animated-btn:hover::before {
width: 300px;
height: 300px;
}
.animated-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(79, 172, 254, 0.3);
}
.animated-btn:active {
transform: translateY(0);
}
/* Loading Animation */
.animated-btn.loading {
pointer-events: none;
}
.animated-btn.loading::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
margin: -10px 0 0 -10px;
border: 2px solid transparent;
border-top: 2px solid white;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Checkmark Animation */
.success-message {
text-align: center;
padding: 2rem;
opacity: 0;
transform: scale(0.8);
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.success-message.show {
opacity: 1;
transform: scale(1);
}
.checkmark {
width: 80px;
height: 80px;
border-radius: 50%;
background: #4caf50;
margin: 0 auto 1rem;
position: relative;
animation: checkmarkScale 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.checkmark::after {
content: '';
position: absolute;
top: 40%;
left: 50%;
width: 20px;
height: 40px;
border: solid white;
border-width: 0 4px 4px 0;
transform: translate(-50%, -50%) rotate(45deg) scale(0);
animation: checkmarkDraw 0.4s 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes checkmarkScale {
0% { transform: scale(0); }
70% { transform: scale(1.1); }
100% { transform: scale(1); }
}
@keyframes checkmarkDraw {
to { transform: translate(-50%, -50%) rotate(45deg) scale(1); }
}
/* Toggle Switch */
.toggle-group {
display: flex;
align-items: center;
margin: 1rem 0;
}
.toggle-switch {
position: relative;
width: 60px;
height: 30px;
margin-right: 1rem;
}
.toggle-switch input {
opacity: 0;
width: 0;
height: 0;
}
.toggle-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #ccc;
transition: 0.4s;
border-radius: 34px;
}
.toggle-slider::before {
content: '';
position: absolute;
height: 22px;
width: 22px;
left: 4px;
bottom: 4px;
background: white;
transition: 0.4s;
border-radius: 50%;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.toggle-switch input:checked + .toggle-slider {
background: #4facfe;
}
.toggle-switch input:checked + .toggle-slider::before {
transform: translateX(30px);
}
/* Animated Radio Buttons */
.animated-radio {
position: relative;
margin: 0.5rem 0;
}
.animated-radio input {
opacity: 0;
position: absolute;
}
.animated-radio-label {
display: flex;
align-items: center;
padding: 1rem;
background: #f7fafc;
border: 2px solid #e2e8f0;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.animated-radio-label::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(79, 172, 254, 0.1), transparent);
transition: left 0.6s;
}
.animated-radio input:checked + .animated-radio-label {
background: #4facfe;
color: white;
border-color: #4facfe;
transform: translateX(5px);
}
.animated-radio input:checked + .animated-radio-label::before {
left: 100%;
}
.radio-dot {
width: 20px;
height: 20px;
border: 2px solid #cbd5e0;
border-radius: 50%;
margin-right: 1rem;
position: relative;
transition: all 0.3s ease;
}
.animated-radio input:checked + .animated-radio-label .radio-dot {
border-color: white;
background: white;
}
.animated-radio input:checked + .animated-radio-label .radio-dot::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 8px;
height: 8px;
background: #4facfe;
border-radius: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="form-container">
<div class="form-header">
<h1>Animated Login</h1>
<p>Experience smooth animations</p>
</div>
<form id="animatedForm">
<!-- Material Design Input -->
<div class="material-input">
<input type="email" class="animated-input" id="animatedEmail" placeholder=" " required>
<label for="animatedEmail" class="material-label">Email Address</label>
<div class="material-underline"></div>
</div>
<!-- Material Design Input -->
<div class="material-input">
<input type="password" class="animated-input" id="animatedPassword" placeholder=" " required>
<label for="animatedPassword" class="material-label">Password</label>
<div class="material-underline"></div>
</div>
<!-- Toggle Switch -->
<div class="toggle-group">
<label class="toggle-switch">
<input type="checkbox" id="rememberMe">
<span class="toggle-slider"></span>
</label>
<label for="rememberMe" class="form-label">Remember me</label>
</div>
<!-- Animated Radio Buttons -->
<div class="form-group">
<label class="form-label">Login Type</label>
<div class="animated-radio">
<input type="radio" id="user" name="loginType" value="user" checked>
<label for="user" class="animated-radio-label">
<span class="radio-dot"></span>
Regular User
</label>
</div>
<div class="animated-radio">
<input type="radio" id="admin" name="loginType" value="admin">
<label for="admin" class="animated-radio-label">
<span class="radio-dot"></span>
Administrator
</label>
</div>
</div>
<!-- Submit Button -->
<button type="submit" class="animated-btn" id="submitBtn">
Sign In
</button>
</form>
<!-- Success Message -->
<div class="success-message" id="successMessage">
<div class="checkmark"></div>
<h3>Login Successful!</h3>
<p>Welcome back to your account</p>
</div>
</div>
<script>
const form = document.getElementById('animatedForm');
const submitBtn = document.getElementById('submitBtn');
const successMessage = document.getElementById('successMessage');
form.addEventListener('submit', function(e) {
e.preventDefault();
// Show loading state
submitBtn.classList.add('loading');
submitBtn.disabled = true;
// Simulate API call
setTimeout(() => {
submitBtn.classList.remove('loading');
successMessage.classList.add('show');
// Reset form after success
setTimeout(() => {
form.reset();
successMessage.classList.remove('show');
submitBtn.disabled = false;
}, 3000);
}, 2000);
});
// Add focus animations
const inputs = document.querySelectorAll('.animated-input');
inputs.forEach(input => {
input.addEventListener('focus', function() {
this.parentElement.style.transform = 'translateY(-5px)';
});
input.addEventListener('blur', function() {
this.parentElement.style.transform = 'translateY(0)';
});
});
</script>
</body>
</html>Responsive Form Design
Mobile-First Approach
Design forms for mobile devices first, then enhance for larger screens using CSS Grid, Flexbox, and media queries to ensure optimal usability on all devices.
@media (max-width: 768px) {
.input-group { grid-template-columns: 1fr; }
.button-group { flex-direction: column; }
}
Responsive Form Examples
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive CSS Forms</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
line-height: 1.6;
background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
min-height: 100vh;
padding: 1rem;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.form-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 2rem;
margin: 2rem 0;
}
.form-section {
background: white;
border-radius: 15px;
padding: 2rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.form-section h2 {
color: #2d3748;
margin-bottom: 1.5rem;
font-size: 1.5rem;
}
/* Multi-Step Form */
.multi-step-form {
background: white;
border-radius: 15px;
padding: 2rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
margin: 2rem 0;
}
.step-indicator {
display: flex;
justify-content: space-between;
margin-bottom: 2rem;
position: relative;
}
.step-indicator::before {
content: '';
position: absolute;
top: 15px;
left: 0;
right: 0;
height: 2px;
background: #e2e8f0;
z-index: 1;
}
.step {
text-align: center;
position: relative;
z-index: 2;
}
.step-circle {
width: 30px;
height: 30px;
background: #e2e8f0;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 0.5rem;
font-weight: bold;
color: #718096;
transition: all 0.3s ease;
}
.step.active .step-circle {
background: #ff9a9e;
color: white;
}
.step.completed .step-circle {
background: #4caf50;
color: white;
}
.step-content {
display: none;
}
.step-content.active {
display: block;
animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* Responsive Input Groups */
.input-group {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin-bottom: 1rem;
}
.form-control {
width: 100%;
padding: 1rem;
border: 2px solid #e2e8f0;
border-radius: 8px;
font-size: 1rem;
transition: all 0.3s ease;
}
.form-control:focus {
outline: none;
border-color: #ff9a9e;
box-shadow: 0 0 0 3px rgba(255, 154, 158, 0.1);
}
/* Button Group */
.button-group {
display: flex;
gap: 1rem;
margin-top: 2rem;
}
.btn {
padding: 1rem 2rem;
border: none;
border-radius: 8px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
flex: 1;
}
.btn-primary {
background: #ff9a9e;
color: white;
}
.btn-primary:hover {
background: #ff7b80;
transform: translateY(-2px);
}
.btn-secondary {
background: #e2e8f0;
color: #4a5568;
}
.btn-secondary:hover {
background: #cbd5e0;
}
/* Search Form */
.search-form {
position: relative;
margin: 1rem 0;
}
.search-input {
width: 100%;
padding: 1rem 3rem 1rem 1rem;
border: 2px solid #e2e8f0;
border-radius: 25px;
font-size: 1rem;
transition: all 0.3s ease;
}
.search-input:focus {
outline: none;
border-color: #ff9a9e;
box-shadow: 0 0 0 3px rgba(255, 154, 158, 0.1);
}
.search-btn {
position: absolute;
right: 5px;
top: 50%;
transform: translateY(-50%);
background: #ff9a9e;
color: white;
border: none;
border-radius: 50%;
width: 40px;
height: 40px;
cursor: pointer;
transition: all 0.3s ease;
}
.search-btn:hover {
background: #ff7b80;
transform: translateY(-50%) scale(1.1);
}
/* Filter Form */
.filter-form {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
margin: 1rem 0;
}
.filter-select {
padding: 1rem;
border: 2px solid #e2e8f0;
border-radius: 8px;
background: white;
font-size: 1rem;
}
/* Contact Form */
.contact-form {
display: grid;
gap: 1rem;
}
.form-textarea {
min-height: 120px;
resize: vertical;
font-family: inherit;
}
/* Responsive Adjustments */
@media (max-width: 768px) {
.form-grid {
grid-template-columns: 1fr;
}
.input-group {
grid-template-columns: 1fr;
}
.filter-form {
grid-template-columns: 1fr;
}
.button-group {
flex-direction: column;
}
.step-indicator {
flex-wrap: wrap;
gap: 1rem;
}
.step {
flex: 1;
min-width: 80px;
}
}
@media (max-width: 480px) {
.form-section {
padding: 1.5rem;
}
.btn {
padding: 0.8rem 1rem;
}
}
/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
.form-section, .multi-step-form {
background: #2d3748;
color: white;
}
.form-control, .search-input, .filter-select {
background: #4a5568;
border-color: #718096;
color: white;
}
.form-control:focus, .search-input:focus {
border-color: #ff9a9e;
}
.btn-secondary {
background: #4a5568;
color: #e2e8f0;
}
}
</style>
</head>
<body>
<div class="container">
<h1 style="text-align: center; color: white; margin: 2rem 0;">Responsive CSS Forms</h1>
<!-- Multi-Step Form -->
<div class="multi-step-form">
<h2>Multi-Step Registration</h2>
<div class="step-indicator">
<div class="step completed">
<div class="step-circle">1</div>
<div>Personal</div>
</div>
<div class="step active">
<div class="step-circle">2</div>
<div>Address</div>
</div>
<div class="step">
<div class="step-circle">3</div>
<div>Payment</div>
</div>
<div class="step">
<div class="step-circle">4</div>
<div>Confirm</div>
</div>
</div>
<div class="step-content active">
<div class="input-group">
<input type="text" class="form-control" placeholder="Street Address">
<input type="text" class="form-control" placeholder="Apt/Suite">
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="City">
<select class="form-control">
<option>Select State</option>
<option>California</option>
<option>New York</option>
<option>Texas</option>
</select>
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="ZIP Code">
<select class="form-control">
<option>Select Country</option>
<option>United States</option>
<option>Canada</option>
<option>UK</option>
</select>
</div>
<div class="button-group">
<button class="btn btn-secondary">Back</button>
<button class="btn btn-primary">Next Step</button>
</div>
</div>
</div>
<div class="form-grid">
<!-- Search Form -->
<div class="form-section">
<h2>🔍 Search Interface</h2>
<div class="search-form">
<input type="text" class="search-input" placeholder="Search products, articles, users...">
<button class="search-btn">🔍</button>
</div>
<div class="filter-form">
<select class="filter-select">
<option>All Categories</option>
<option>Electronics</option>
<option>Books</option>
<option>Clothing</option>
</select>
<select class="filter-select">
<option>Sort by: Relevance</option>
<option>Price: Low to High</option>
<option>Price: High to Low</option>
<option>Newest First</option>
</select>
</div>
</div>
<!-- Contact Form -->
<div class="form-section">
<h2>📧 Contact Form</h2>
<form class="contact-form">
<input type="text" class="form-control" placeholder="Your Name" required>
<input type="email" class="form-control" placeholder="Email Address" required>
<input type="text" class="form-control" placeholder="Subject">
<textarea class="form-control form-textarea" placeholder="Your Message"></textarea>
<button type="submit" class="btn btn-primary">Send Message</button>
</form>
</div>
</div>
<!-- Responsive Data Table Form -->
<div class="form-section">
<h2>📊 Data Filtering</h2>
<div style="overflow-x: auto;">
<table style="width: 100%; border-collapse: collapse;">
<thead>
<tr>
<th style="padding: 1rem; text-align: left; border-bottom: 2px solid #e2e8f0;">
<input type="text" class="form-control" placeholder="Filter Name" style="width: 100%;">
</th>
<th style="padding: 1rem; text-align: left; border-bottom: 2px solid #e2e8f0;">
<select class="form-control" style="width: 100%;">
<option>All Status</option>
<option>Active</option>
<option>Inactive</option>
</select>
</th>
<th style="padding: 1rem; text-align: left; border-bottom: 2px solid #e2e8f0;">
<input type="date" class="form-control" style="width: 100%;">
</th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding: 1rem; border-bottom: 1px solid #e2e8f0;">John Doe</td>
<td style="padding: 1rem; border-bottom: 1px solid #e2e8f0;">Active</td>
<td style="padding: 1rem; border-bottom: 1px solid #e2e8f0;">2024-01-15</td>
</tr>
<tr>
<td style="padding: 1rem; border-bottom: 1px solid #e2e8f0;">Jane Smith</td>
<td style="padding: 1rem; border-bottom: 1px solid #e2e8f0;">Inactive</td>
<td style="padding: 1rem; border-bottom: 1px solid #e2e8f0;">2024-01-10</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>Accessible Form Design
👁️ High Contrast
Support for users with visual impairments
⌨️ Keyboard Navigation
Full keyboard accessibility support
📢 Screen Readers
Proper ARIA labels and live regions
Accessible Contact Form
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accessible CSS Forms</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
line-height: 1.6;
background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
min-height: 100vh;
padding: 2rem;
display: flex;
justify-content: center;
align-items: center;
}
.form-container {
background: white;
border-radius: 20px;
padding: 3rem;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
max-width: 600px;
width: 100%;
}
.form-header {
text-align: center;
margin-bottom: 2rem;
}
.form-header h1 {
color: #2d3748;
font-size: 2rem;
margin-bottom: 0.5rem;
}
/* High Contrast Support */
@media (prefers-contrast: high) {
.form-container {
border: 3px solid #000;
}
.form-input {
border-width: 3px;
}
}
/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* Accessible Form Styles */
.form-group {
margin-bottom: 2rem;
}
.form-label {
display: block;
margin-bottom: 0.5rem;
font-weight: 600;
color: #2d3748;
font-size: 1rem;
}
.required::after {
content: " *";
color: #e53e3e;
}
.form-input {
width: 100%;
padding: 1rem;
border: 2px solid #4a5568;
border-radius: 8px;
font-size: 1rem;
background: white;
color: #2d3748;
}
.form-input:focus {
outline: 3px solid #3182ce;
outline-offset: 2px;
border-color: #3182ce;
}
/* Error States */
.form-input.error {
border-color: #e53e3e;
background: #fed7d7;
}
.error-message {
color: #e53e3e;
font-size: 0.875rem;
margin-top: 0.25rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.error-message::before {
content: "⚠";
font-size: 1rem;
}
/* Success States */
.form-input.success {
border-color: #38a169;
background: #f0fff4;
}
.success-message {
color: #38a169;
font-size: 0.875rem;
margin-top: 0.25rem;
}
/* Accessible Checkboxes */
.checkbox-group {
margin: 1rem 0;
}
.accessible-checkbox {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.5rem;
border-radius: 4px;
transition: background-color 0.2s;
}
.accessible-checkbox:hover {
background: #edf2f7;
}
.accessible-checkbox input {
width: 20px;
height: 20px;
border: 2px solid #4a5568;
border-radius: 4px;
appearance: none;
position: relative;
cursor: pointer;
}
.accessible-checkbox input:checked {
background: #3182ce;
border-color: #3182ce;
}
.accessible-checkbox input:checked::after {
content: "✓";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-weight: bold;
}
.accessible-checkbox input:focus {
outline: 2px solid #3182ce;
outline-offset: 2px;
}
/* Accessible Radio Buttons */
.radio-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin: 1rem 0;
}
.accessible-radio {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.5rem;
border-radius: 4px;
transition: background-color 0.2s;
}
.accessible-radio:hover {
background: #edf2f7;
}
.accessible-radio input {
width: 20px;
height: 20px;
border: 2px solid #4a5568;
border-radius: 50%;
appearance: none;
position: relative;
cursor: pointer;
}
.accessible-radio input:checked {
border-color: #3182ce;
}
.accessible-radio input:checked::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 10px;
height: 10px;
background: #3182ce;
border-radius: 50%;
}
.accessible-radio input:focus {
outline: 2px solid #3182ce;
outline-offset: 2px;
}
/* Accessible Button */
.accessible-btn {
width: 100%;
padding: 1rem;
background: #3182ce;
color: white;
border: none;
border-radius: 8px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
position: relative;
}
.accessible-btn:hover {
background: #2c5aa0;
transform: translateY(-1px);
}
.accessible-btn:active {
transform: translateY(0);
}
.accessible-btn:focus {
outline: 3px solid #3182ce;
outline-offset: 2px;
}
.accessible-btn:disabled {
background: #a0aec0;
cursor: not-allowed;
transform: none;
}
/* Fieldset and Legend */
.fieldset-group {
border: 2px solid #e2e8f0;
border-radius: 8px;
padding: 1.5rem;
margin: 1rem 0;
}
.fieldset-legend {
font-weight: 600;
color: #2d3748;
padding: 0 0.5rem;
background: white;
}
/* Skip Link */
.skip-link {
position: absolute;
top: -40px;
left: 6px;
background: #3182ce;
color: white;
padding: 8px;
text-decoration: none;
border-radius: 4px;
z-index: 1000;
transition: top 0.2s;
}
.skip-link:focus {
top: 6px;
}
/* ARIA Live Regions */
.live-region {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
overflow: hidden;
}
.live-region:focus {
position: static;
width: auto;
height: auto;
}
/* Large Text Support */
@media (prefers-reduced-data: no-preference) {
.form-container {
font-size: clamp(1rem, 2vw, 1.2rem);
}
}
/* Print Styles */
@media print {
.form-container {
box-shadow: none;
border: 1px solid #000;
}
.accessible-btn {
background: white;
color: black;
border: 1px solid #000;
}
}
</style>
</head>
<body>
<a href="#main-content" class="skip-link">Skip to main content</a>
<div class="form-container" id="main-content">
<div class="form-header">
<h1>Accessible Contact Form</h1>
<p>Designed with accessibility in mind</p>
</div>
<form id="accessibleForm" aria-labelledby="main-content">
<div class="form-group">
<label for="accessibleName" class="form-label required">Full Name</label>
<input type="text" id="accessibleName" class="form-input" required aria-required="true" aria-describedby="nameError">
<div id="nameError" class="error-message" role="alert" aria-live="polite"></div>
</div>
<div class="form-group">
<label for="accessibleEmail" class="form-label required">Email Address</label>
<input type="email" id="accessibleEmail" class="form-input" required aria-required="true" aria-describedby="emailError">
<div id="emailError" class="error-message" role="alert" aria-live="polite"></div>
</div>
<fieldset class="fieldset-group">
<legend class="fieldset-legend">Contact Preference</legend>
<div class="radio-group">
<label class="accessible-radio">
<input type="radio" name="contactPref" value="email" checked aria-checked="true">
<span>Email</span>
</label>
<label class="accessible-radio">
<input type="radio" name="contactPref" value="phone" aria-checked="false">
<span>Phone</span>
</label>
<label class="accessible-radio">
<input type="radio" name="contactPref" value="both" aria-checked="false">
<span>Both</span>
</label>
</div>
</fieldset>
<div class="form-group">
<label for="accessiblePhone" class="form-label">Phone Number</label>
<input type="tel" id="accessiblePhone" class="form-input" aria-describedby="phoneHelp">
<div id="phoneHelp" class="success-message">Optional - include area code</div>
</div>
<div class="form-group">
<label for="accessibleMessage" class="form-label required">Message</label>
<textarea id="accessibleMessage" class="form-input" rows="4" required aria-required="true" aria-describedby="messageHelp"></textarea>
<div id="messageHelp" class="success-message">Please describe your inquiry in detail</div>
</div>
<div class="checkbox-group">
<label class="accessible-checkbox">
<input type="checkbox" id="accessibleConsent" required aria-required="true">
<span>I agree to the terms and conditions</span>
</label>
</div>
<div class="checkbox-group">
<label class="accessible-checkbox">
<input type="checkbox" id="accessibleNewsletter">
<span>Subscribe to newsletter (optional)</span>
</label>
</div>
<button type="submit" class="accessible-btn" aria-label="Submit contact form">
Submit Message
</button>
</form>
<div class="live-region" aria-live="polite" aria-atomic="true"></div>
</div>
<script>
const form = document.getElementById('accessibleForm');
const liveRegion = document.querySelector('.live-region');
// Real-time validation
const inputs = form.querySelectorAll('input, textarea');
inputs.forEach(input => {
input.addEventListener('blur', validateField);
input.addEventListener('input', clearError);
});
function validateField(e) {
const field = e.target;
const errorElement = document.getElementById(field.id + 'Error') || field.nextElementSibling;
// Clear previous states
field.classList.remove('error', 'success');
if (field.required && !field.value.trim()) {
field.classList.add('error');
if (errorElement) {
errorElement.textContent = `${field.labels[0].textContent} is required`;
}
announceToScreenReader(`${field.labels[0].textContent} is required`);
} else if (field.type === 'email' && field.value && !isValidEmail(field.value)) {
field.classList.add('error');
if (errorElement) {
errorElement.textContent = 'Please enter a valid email address';
}
announceToScreenReader('Please enter a valid email address');
} else if (field.value) {
field.classList.add('success');
}
}
function clearError(e) {
const field = e.target;
field.classList.remove('error');
const errorElement = document.getElementById(field.id + 'Error') || field.nextElementSibling;
if (errorElement && errorElement.classList.contains('error-message')) {
errorElement.textContent = '';
}
}
function isValidEmail(email) {
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}
function announceToScreenReader(message) {
liveRegion.textContent = message;
setTimeout(() => {
liveRegion.textContent = '';
}, 3000);
}
form.addEventListener('submit', function(e) {
e.preventDefault();
// Validate all fields
let isValid = true;
inputs.forEach(input => {
if (input.required && !input.value.trim()) {
isValid = false;
input.classList.add('error');
const errorElement = document.getElementById(input.id + 'Error') || input.nextElementSibling;
if (errorElement) {
errorElement.textContent = `${input.labels[0].textContent} is required`;
}
}
});
if (isValid) {
announceToScreenReader('Form submitted successfully');
alert('Form submitted successfully! (This is a demo)');
form.reset();
} else {
announceToScreenReader('Please fix the errors in the form');
}
});
// Enhance keyboard navigation
form.addEventListener('keydown', function(e) {
if (e.key === 'Escape') {
e.target.blur();
}
});
</script>
</body>
</html>Best Practices & Common Patterns
✅ Do This
- Use semantic HTML5 form elements
- Provide clear labels and instructions
- Implement proper focus indicators
- Use appropriate input types
- Provide helpful error messages
- Test with screen readers
❌ Avoid This
- Don't remove default focus styles completely
- Avoid tiny touch targets on mobile
- Don't use placeholder text as labels
- Avoid complex form layouts
- Don't hide validation until submit
- Avoid poor color contrast
🎯 Form Design Principles
User Experience:
- Keep forms short and simple
- Group related fields together
- Use progressive disclosure
- Provide immediate feedback
Technical Considerations:
- Use proper form validation
- Implement loading states
- Consider form security
- Optimize for performance
Browser Support & Modern Features
CSS Form Features Support
CSS Grid Forms
97%+
Flexbox Layouts
99%+
CSS Variables
95%+
Modern Selectors
98%+
:focus-visible
92%+
accent-color
88%+
::backdrop
85%+
:has() for forms
88%+
Ready to Design Beautiful Forms? 📝
Experiment with our comprehensive form examples and create stunning, accessible forms that provide exceptional user experiences.