Styling and CSS

Overview

The plugin includes default CSS styles that provide basic formatting for password reset forms. You can customize the visual appearance by adding your own CSS rules to override the defaults or by completely replacing the plugin's stylesheet.

Default stylesheet

The plugin loads assets/css/password-lost.css which includes styles for:

Form wrappers and containers
Success and error messages
Password input fields
Password visibility toggle buttons
Password requirements list
Submit buttons

Available CSS classes and IDs

Main containers

#password-lost-form-wrap
Main wrapper for all forms and messages

#password-reset-complete
Container for completion page content

Forms

#lostpasswordform
Lost password form (email/username entry)

#resetpasswordform
Reset password form (new password entry)

Messages

.som-password-sent-message
Success messages (email sent, password changed)

.som-password-error-message
Error messages (validation failures, expired keys)

Input fields

#somfrp_user_info
Email/username input field

#som_new_user_pass
New password input field

#som_new_user_pass_again
Confirm password input field

.som-password-input
Class for password input fields

.somfrp-password-wrapper
Wrapper div for password fields with eye toggle

Password visibility toggle

.somfrp-eye-toggle
Toggle button for showing/hiding password

.somfrp-eye
Eye icon (password hidden state)

.somfrp-eye-off
Eye-off icon (password visible state)

Password requirements

.password-requirements
Unordered list container for requirements

.password-requirements li
Individual requirement items

.password-requirements li.valid
Requirement met (green)

.password-requirements li.invalid
Requirement not met (red)

Submit elements

.lostpassword-submit
Container for submit button and hidden fields

#reset-pass-submit
Submit button ID for reset form

.sompass-submit-loading
Loading indicator (shown during submission)

Adding custom CSS

Method 1: Theme stylesheet

Add your custom CSS to your theme's style.css:

/* Customize form wrapper */
#password-lost-form-wrap {
    max-width: 500px;
    margin: 40px auto;
    padding: 30px;
    background: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* Customize form title */
#lostpasswordform legend,
#resetpasswordform legend {
    font-size: 24px;
    font-weight: 600;
    color: #333;
    margin-bottom: 20px;
}

/* Customize input fields */
#somfrp_user_info,
.som-password-input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
}

/* Customize submit button */
#lostpasswordform button[type="submit"],
#resetpasswordform button[type="submit"] {
    width: 100%;
    padding: 12px 24px;
    background: #0073aa;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.3s;
}

#lostpasswordform button[type="submit"]:hover,
#resetpasswordform button[type="submit"]:hover {
    background: #005177;
}

/* Customize success messages */
.som-password-sent-message {
    background-color: #4CAF50;
    border-color: #4CAF50;
    color: #fff;
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 20px;
}

/* Customize error messages */
.som-password-error-message {
    background-color: #f44336;
    border-color: #f44336;
    color: #fff;
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 20px;
}

Method 2: Custom CSS file

Create a custom CSS file and enqueue it in your theme's functions.php:

function my_theme_custom_password_reset_styles() {
    if ( is_page( 'reset-password' ) ) { // Adjust page slug
        wp_enqueue_style( 
            'custom-password-reset', 
            get_stylesheet_directory_uri() . '/css/custom-password-reset.css',
            array(), 
            '1.0.0' 
        );
    }
}
add_action( 'wp_enqueue_scripts', 'my_theme_custom_password_reset_styles', 20 );

Method 3: Inline CSS

Add inline CSS using WordPress Customizer or a custom CSS plugin:

/* Add via Appearance > Customize > Additional CSS */
#password-lost-form-wrap {
    /* Your custom styles */
}

Styling examples

Example 1: Modern card design

#password-lost-form-wrap {
    max-width: 450px;
    margin: 60px auto;
    padding: 40px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

#lostpasswordform legend,
#resetpasswordform legend {
    font-size: 28px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 10px;
    text-align: center;
}

.somfrp-lost-pass-form-text,
.somfrp-reset-pass-form-text {
    color: #666;
    text-align: center;
    margin-bottom: 30px;
}

#somfrp_user_info,
.som-password-input {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 16px;
    transition: border-color 0.3s;
}

#somfrp_user_info:focus,
.som-password-input:focus {
    outline: none;
    border-color: #0073aa;
}

button[type="submit"] {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s;
}

button[type="submit"]:hover {
    transform: translateY(-2px);
}

Example 2: Minimal design

#password-lost-form-wrap {
    max-width: 400px;
    margin: 80px auto;
}

#lostpasswordform,
#resetpasswordform {
    border: none;
    padding: 0;
}

#lostpasswordform legend,
#resetpasswordform legend {
    font-size: 32px;
    font-weight: 300;
    color: #000;
    margin-bottom: 40px;
    border: none;
}

#somfrp_user_info,
.som-password-input {
    width: 100%;
    padding: 12px 0;
    border: none;
    border-bottom: 1px solid #ddd;
    border-radius: 0;
    font-size: 16px;
    background: transparent;
}

#somfrp_user_info:focus,
.som-password-input:focus {
    outline: none;
    border-bottom-color: #000;
}

button[type="submit"] {
    width: 100%;
    padding: 16px;
    background: #000;
    color: #fff;
    border: none;
    border-radius: 0;
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    margin-top: 30px;
}

button[type="submit"]:hover {
    background: #333;
}

.som-password-sent-message,
.som-password-error-message {
    border: none;
    border-left: 4px solid #000;
    border-radius: 0;
    background: #f5f5f5;
    color: #000;
}

Example 3: Dark mode

#password-lost-form-wrap {
    max-width: 500px;
    margin: 40px auto;
    padding: 40px;
    background: #1e1e1e;
    border-radius: 8px;
    border: 1px solid #333;
}

#lostpasswordform legend,
#resetpasswordform legend {
    color: #fff;
    font-size: 24px;
    margin-bottom: 20px;
}

.somfrp-lost-pass-form-text,
.somfrp-reset-pass-form-text {
    color: #aaa;
}

#somfrp_user_info,
.som-password-input {
    width: 100%;
    padding: 12px;
    background: #2a2a2a;
    border: 1px solid #444;
    border-radius: 4px;
    color: #fff;
    font-size: 16px;
}

#somfrp_user_info:focus,
.som-password-input:focus {
    outline: none;
    border-color: #0073aa;
    background: #333;
}

button[type="submit"] {
    width: 100%;
    padding: 12px;
    background: #0073aa;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
}

button[type="submit"]:hover {
    background: #005177;
}

.password-requirements li {
    color: #666;
}

.password-requirements li.valid {
    color: #4CAF50;
}

.password-requirements li.invalid {
    color: #f44336;
}

Styling password requirements

Customize the visual feedback for password requirements:

.password-requirements {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.password-requirements li {
    padding: 8px 0;
    padding-left: 30px;
    position: relative;
    color: #999;
    transition: color 0.3s;
}

.password-requirements li::before {
    content: "○";
    position: absolute;
    left: 0;
    font-size: 20px;
}

.password-requirements li.valid {
    color: #4CAF50;
}

.password-requirements li.valid::before {
    content: "✓";
    color: #4CAF50;
}

.password-requirements li.invalid {
    color: #f44336;
}

.password-requirements li.invalid::before {
    content: "✗";
    color: #f44336;
}

Styling eye toggle

Customize the password visibility toggle button:

.somfrp-password-wrapper {
    position: relative;
    width: 100%;
    max-width: 400px;
}

.somfrp-eye-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    color: #666;
    transition: color 0.3s;
}

.somfrp-eye-toggle:hover {
    color: #0073aa;
}

.somfrp-eye-toggle:focus {
    outline: 2px solid #0073aa;
    outline-offset: 2px;
}

/* Use dashicons or custom icons */
.somfrp-eye::before {
    content: "\f177"; /* Dashicons eye */
    font-family: dashicons;
    font-size: 20px;
}

.somfrp-eye-off::before {
    content: "\f530"; /* Dashicons hidden */
    font-family: dashicons;
    font-size: 20px;
}

Responsive design

Make forms mobile-friendly:

@media (max-width: 768px) {
    #password-lost-form-wrap {
        margin: 20px;
        padding: 20px;
    }

    #lostpasswordform legend,
    #resetpasswordform legend {
        font-size: 20px;
    }

    #somfrp_user_info,
    .som-password-input {
        font-size: 16px; /* Prevents zoom on iOS */
    }

    button[type="submit"] {
        padding: 14px;
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    #password-lost-form-wrap {
        margin: 10px;
        padding: 15px;
    }

    .password-requirements {
        font-size: 14px;
    }
}

Disabling default styles

To completely replace the plugin's styles, dequeue the default stylesheet:

function my_theme_remove_password_reset_styles() {
    wp_dequeue_style( 'somfrp-password-lost-style' );
    wp_deregister_style( 'somfrp-password-lost-style' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_remove_password_reset_styles', 100 );

Then add your own complete stylesheet.

Accessibility considerations

When styling forms, maintain accessibility:

/* Ensure sufficient color contrast */
#somfrp_user_info,
.som-password-input {
    color: #000;
    background: #fff;
}

/* Visible focus indicators */
#somfrp_user_info:focus,
.som-password-input:focus,
button[type="submit"]:focus {
    outline: 2px solid #0073aa;
    outline-offset: 2px;
}

/* Don't rely solely on color for validation */
.password-requirements li.valid::before {
    content: "✓ ";
}

.password-requirements li.invalid::before {
    content: "✗ ";
}

/* Ensure touch targets are large enough */
button[type="submit"],
.somfrp-eye-toggle {
    min-height: 44px;
    min-width: 44px;
}

Browser compatibility

Test your custom styles in multiple browsers:

Chrome/Edge (Chromium)
Firefox
Safari (macOS and iOS)
Mobile browsers

Use vendor prefixes for CSS properties with limited support:

button[type="submit"] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    background: -webkit-linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    background: -moz-linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

What's next

Email customization - Customize reset emails
Design settings - Configure eye toggle
Templates reference - Understand template structure

Overview​

Default stylesheet​

Available CSS classes and IDs​

Main containers​

Forms​

Messages​

Input fields​

Password visibility toggle​

Password requirements​

Submit elements​

Adding custom CSS​

Method 1: Theme stylesheet​

Method 2: Custom CSS file​

Method 3: Inline CSS​

Styling examples​

Example 1: Modern card design​

Example 2: Minimal design​

Example 3: Dark mode​

Styling password requirements​

Styling eye toggle​

Responsive design​

Disabling default styles​

Accessibility considerations​

Browser compatibility​

What's next​