CSS Styling for Login Forms

Version: 1.2.1 (Core & Pro) Last Updated: November 2025 Difficulty: Intermediate Time Required: 30-60 minutes

Overview

Transform your login forms with custom CSS to match your brand and design. This guide provides complete styling examples from minimal to advanced designs.

Where to Add Custom CSS

Method 1: Theme Customizer (Recommended)

Steps:

Go to Appearance → Customize

Click Additional CSS

Paste your CSS code

Click Publish

Advantages:

✅ Changes persist across theme updates

✅ Live preview while editing

✅ Easy to modify

Method 2: Child Theme Stylesheet

Steps:

Open style.css in your child theme

Add CSS at the bottom of the file

Save and upload

Clear cache

Advantages:

✅ Version controlled

✅ Best for extensive customizations

Method 3: Custom CSS Plugin

Steps:

Install “Simple Custom CSS” or similar

Go to plugin settings

Add your CSS

Save changes

Advantages:

✅ Theme-independent

✅ Easy management interface

Basic CSS Structure

Form Elements Reference


/<em> Main form container </em>/
.attributes-login-form { }

/<em> Form title </em>/
.attributes-login-form h2 { }

/<em> Input fields </em>/
.attributes-login-form input[type="text"],
.attributes-login-form input[type="password"],
.attributes-login-form input[type="email"] { }

/<em> Labels </em>/
.attributes-login-form label { }

/<em> Submit button </em>/
.attributes-login-form input[type="submit"] { }

/<em> Remember me checkbox </em>/
.attributes-login-form .remember-me { }

/<em> Lost password link </em>/
.attributes-login-form .lost-password-link { }

/<em> Error messages </em>/
.attributes-login-form .error-message { }

/<em> Success messages </em>/
.attributes-login-form .success-message { }

Complete Design Examples

Design 1: Modern Minimal

Perfect for: Tech startups, SaaS platforms, modern brands


.attributes-login-form {
    max-width: 350px;
    margin: 50px auto;
    padding: 40px;
    background: white;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border-radius: 8px;
}

.attributes-login-form h2 {
    text-align: center;
    margin-bottom: 30px;
    color: #333;
    font-size: 24px;
    font-weight: 300;
    letter-spacing: 0.5px;
}

.attributes-login-form label {
    display: block;
    margin-bottom: 8px;
    color: #666;
    font-size: 14px;
    font-weight: 500;
}

.attributes-login-form input[type="text"],
.attributes-login-form input[type="password"],
.attributes-login-form input[type="email"] {
    width: 100%;
    border: none;
    border-bottom: 2px solid #eee;
    border-radius: 0;
    padding: 15px 5px;
    font-size: 16px;
    transition: border-color 0.3s;
    background: transparent;
}

.attributes-login-form input[type="text"]:focus,
.attributes-login-form input[type="password"]:focus,
.attributes-login-form input[type="email"]:focus {
    outline: none;
    border-bottom-color: #667eea;
}

.attributes-login-form input[type="submit"] {
    width: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 15px;
    border: none;
    border-radius: 4px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.2s;
    margin-top: 20px;
}

.attributes-login-form input[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.attributes-login-form .remember-me {
    margin: 15px 0;
    font-size: 14px;
}

.attributes-login-form .lost-password-link {
    text-align: center;
    margin-top: 20px;
}

.attributes-login-form .lost-password-link a {
    color: #667eea;
    text-decoration: none;
    font-size: 14px;
}

.attributes-login-form .lost-password-link a:hover {
    text-decoration: underline;
}

.attributes-login-form .error-message {
    background-color: #fee;
    color: #c33;
    padding: 12px;
    margin-bottom: 20px;
    border-left: 4px solid #c33;
    border-radius: 4px;
    font-size: 14px;
}

Design 2: Corporate Professional

Perfect for: Business sites, corporate intranets, professional services


.attributes-login-form {
    max-width: 450px;
    margin: 0 auto;
    padding: 50px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0;
}

.attributes-login-form h2 {
    color: #004085;
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 30px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.attributes-login-form label {
    display: block;
    margin-bottom: 8px;
    color: #495057;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.attributes-login-form input[type="text"],
.attributes-login-form input[type="password"],
.attributes-login-form input[type="email"] {
    width: 100%;
    background: white;
    border: 1px solid #ced4da;
    border-radius: 0;
    padding: 14px 16px;
    font-size: 16px;
    margin-bottom: 20px;
    transition: border-color 0.3s;
}

.attributes-login-form input[type="text"]:focus,
.attributes-login-form input[type="password"]:focus,
.attributes-login-form input[type="email"]:focus {
    outline: none;
    border-color: #004085;
}

.attributes-login-form input[type="submit"] {
    width: 100%;
    background-color: #004085;
    color: white;
    padding: 14px;
    border: none;
    border-radius: 0;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.attributes-login-form input[type="submit"]:hover {
    background-color: #003060;
}

.attributes-login-form .remember-me {
    margin: 15px 0 25px;
    font-size: 14px;
    color: #495057;
}

.attributes-login-form .lost-password-link {
    text-align: center;
    margin-top: 20px;
}

.attributes-login-form .lost-password-link a {
    color: #004085;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    text-transform: uppercase;
}

.attributes-login-form .error-message {
    background-color: #f8d7da;
    color: #721c24;
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid #f5c6cb;
    font-size: 14px;
}

Design 3: E-Commerce Friendly

Perfect for: Online stores, WooCommerce sites, retail brands


.attributes-login-form {
    max-width: 400px;
    margin: 0 auto;
    padding: 30px;
    background: white;
    border: 2px solid #28a745;
    border-radius: 8px;
}

.attributes-login-form h2 {
    color: #28a745;
    text-align: center;
    margin-bottom: 25px;
    font-size: 26px;
    font-weight: 700;
}

.attributes-login-form label {
    display: block;
    margin-bottom: 8px;
    color: #333;
    font-size: 14px;
    font-weight: 600;
}

.attributes-login-form input[type="text"],
.attributes-login-form input[type="password"],
.attributes-login-form input[type="email"] {
    width: 100%;
    padding: 12px 15px;
    margin-bottom: 15px;
    border: 2px solid #e0e0e0;
    border-radius: 4px;
    font-size: 16px;
    transition: border-color 0.3s;
}

.attributes-login-form input[type="text"]:focus,
.attributes-login-form input[type="password"]:focus,
.attributes-login-form input[type="email"]:focus {
    outline: none;
    border-color: #28a745;
}

.attributes-login-form input[type="submit"] {
    width: 100%;
    background-color: #28a745;
    color: white;
    padding: 15px;
    border: none;
    border-radius: 4px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
}

.attributes-login-form input[type="submit"]:hover {
    background-color: #218838;
}

.attributes-login-form .remember-me {
    margin: 15px 0;
    font-size: 14px;
}

.attributes-login-form .lost-password-link {
    text-align: center;
    margin-top: 20px;
}

.attributes-login-form .lost-password-link a {
    color: #28a745;
    text-decoration: none;
    font-weight: 600;
}

.attributes-login-form .success-message {
    background-color: #d4edda;
    color: #155724;
    padding: 12px;
    margin-bottom: 20px;
    border: 1px solid #c3e6cb;
    border-radius: 4px;
}

Design 4: Dark Mode

Perfect for: Tech platforms, gaming sites, modern applications


.attributes-login-form {
    max-width: 400px;
    margin: 0 auto;
    padding: 40px;
    background: #1e1e1e;
    border: 1px solid #333;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

.attributes-login-form h2 {
    color: #fff;
    text-align: center;
    margin-bottom: 30px;
    font-size: 24px;
    font-weight: 400;
}

.attributes-login-form label {
    display: block;
    margin-bottom: 8px;
    color: #aaa;
    font-size: 14px;
}

.attributes-login-form input[type="text"],
.attributes-login-form input[type="password"],
.attributes-login-form input[type="email"] {
    width: 100%;
    background: #2a2a2a;
    border: 1px solid #444;
    border-radius: 4px;
    padding: 12px 15px;
    font-size: 16px;
    color: #fff;
    margin-bottom: 15px;
    transition: all 0.3s;
}

.attributes-login-form input[type="text"]:focus,
.attributes-login-form input[type="password"]:focus,
.attributes-login-form input[type="email"]:focus {
    outline: none;
    border-color: #0d6efd;
    background: #333;
}

.attributes-login-form input[type="submit"] {
    width: 100%;
    background: #0d6efd;
    color: white;
    padding: 14px;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s;
}

.attributes-login-form input[type="submit"]:hover {
    background: #0a58ca;
}

.attributes-login-form .remember-me {
    margin: 15px 0;
    color: #aaa;
    font-size: 14px;
}

.attributes-login-form .remember-me input[type="checkbox"] {
    margin-right: 8px;
}

.attributes-login-form .lost-password-link {
    text-align: center;
    margin-top: 20px;
}

.attributes-login-form .lost-password-link a {
    color: #0d6efd;
    text-decoration: none;
}

.attributes-login-form .lost-password-link a:hover {
    text-decoration: underline;
}

.attributes-login-form .error-message {
    background-color: #3d1e1e;
    color: #f88;
    padding: 12px;
    margin-bottom: 20px;
    border: 1px solid #5c2828;
    border-radius: 4px;
}

Mobile Responsive Design

Mobile-First Approach

Base styles (mobile):


.attributes-login-form {
    width: 100%;
    max-width: 400px;
    padding: 20px;
    margin: 20px auto;
}

.attributes-login-form input[type="text"],
.attributes-login-form input[type="password"],
.attributes-login-form input[type="email"] {
    font-size: 16px; /<em> Prevents zoom on iOS </em>/
    padding: 12px;
}

.attributes-login-form input[type="submit"] {
    padding: 16px; /<em> Touch-friendly </em>/
    font-size: 16px;
}

Tablet styles (768px+):


@media (min-width: 768px) {
    .attributes-login-form {
        padding: 40px;
        margin: 50px auto;
    }
}

Desktop styles (1024px+):


@media (min-width: 1024px) {
    .attributes-login-form {
        padding: 50px;
    }
}

Touch-Friendly Buttons


/<em> Minimum 44x44px touch target </em>/
.attributes-login-form input[type="submit"] {
    min-height: 44px;
    padding: 14px 20px;
}

/<em> Hover states (desktop only) </em>/
@media (hover: hover) {
    .attributes-login-form input[type="submit"]:hover {
        background-color: #0056b3;
        transform: translateY(-2px);
    }
}

Advanced Styling Techniques

Adding Icons to Input Fields


.attributes-login-form .input-wrapper {
    position: relative;
    margin-bottom: 15px;
}

.attributes-login-form .input-wrapper::before {
    content: "👤"; /<em> User icon </em>/
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
}

.attributes-login-form .input-wrapper input {
    padding-left: 50px;
}

/<em> Different icons for password field </em>/
.attributes-login-form .password-wrapper::before {
    content: "🔒"; /<em> Lock icon </em>/
}

Floating Labels Effect


.attributes-login-form .form-field {
    position: relative;
    margin-bottom: 25px;
}

.attributes-login-form .form-field input {
    width: 100%;
    padding: 15px 10px 5px;
    border: none;
    border-bottom: 2px solid #ddd;
    background: transparent;
}

.attributes-login-form .form-field label {
    position: absolute;
    left: 10px;
    top: 15px;
    color: #999;
    transition: all 0.3s;
    pointer-events: none;
}

.attributes-login-form .form-field input:focus + label,
.attributes-login-form .form-field input:not(:placeholder-shown) + label {
    top: 0;
    font-size: 12px;
    color: #0073aa;
}

Animated Submit Button


.attributes-login-form input[type="submit"] {
    position: relative;
    overflow: hidden;
    transition: all 0.3s;
}

.attributes-login-form input[type="submit"]::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.attributes-login-form input[type="submit"]:active::before {
    width: 300px;
    height: 300px;
}

Troubleshooting CSS Issues

Styles Not Applying

Solutions:

Clear browser cache (Ctrl+Shift+Del)

Check CSS specificity (use more specific selectors)

Disable caching plugins temporarily

Use !important sparingly as last resort

Check browser developer console for errors

CSS Conflicts with Theme

Solutions:

Use more specific selectors

Check theme’s CSS and override specific properties

Add custom class to form container

Use !important for critical styles

Mobile Layout Broken

Solutions:

Test responsive breakpoints

Use max-width instead of fixed width

Check viewport meta tag exists in header

Use percentage or vw units for widths

Pro Tips

Browser Testing

Always test your CSS in Chrome, Firefox, Safari, and Edge to ensure compatibility.

Use CSS Variables

Define colors as CSS variables for easy theme switching and maintenance.

Performance

Minimize use of heavy animations and complex shadows on mobile devices for better performance.