Elementor Form when diffirent color on different state

elementor-form-color.js

    document.addEventListener('DOMContentLoaded', function() {
    // Select all inputs and textareas within the form
    const inputs = document.querySelectorAll('.elementor-form-fields-wrapper input[type="text"], .elementor-form-fields-wrapper input[type="email"], .elementor-form-fields-wrapper textarea');

    // Loop through each input
    inputs.forEach(input => {
        // Add an event listener for input change
        input.addEventListener('input', function() {
            if (input.value.trim() !== "") {
                input.classList.add('filled'); // Add 'filled' class if there is content
            } else {
                input.classList.remove('filled'); // Remove 'filled' class if empty
            }
        });
    });
});


 document.addEventListener('DOMContentLoaded', function() {
    const inputs = document.querySelectorAll('.elementor-form-fields-wrapper input[type="text"], .elementor-form-fields-wrapper input[type="email"], .elementor-form-fields-wrapper input[type="tel"], .elementor-form-fields-wrapper textarea');

    inputs.forEach(input => {
        // Add event listener for when the input loses focus
        input.addEventListener('blur', function() {
            const hasContent = input.value.trim() !== "";
            const isValid = input.checkValidity();

            if (hasContent && !isValid) {
                // If the input has content but is invalid, apply red border and red placeholder
                input.style.border = '1px solid #ff0000';
                // input.style.boxShadow = '0 0 8px 0 #ff0000';
                input.style.color = '#ff0000'; // Change placeholder color to red
                input.setAttribute('data-placeholder', input.placeholder); // Save original placeholder
                input.placeholder = "Invalid input"; // Set custom invalid placeholder text
            } else {
                // If the input is valid or empty, remove inline styles and reset placeholder
                input.style.border = ''; // Clear inline border style
                input.style.boxShadow = ''; // Clear inline box shadow
                input.style.color = ''; // Reset placeholder color
                if (input.hasAttribute('data-placeholder')) {
                    input.placeholder = input.getAttribute('data-placeholder'); // Restore original placeholder
                    input.removeAttribute('data-placeholder'); // Remove temporary attribute
                }
            }
        });

        // Clear any red border and reset placeholder when the user focuses on the input again
        input.addEventListener('focus', function() {
            input.style.border = ''; // Remove inline border style
            input.style.boxShadow = ''; // Remove inline box shadow
            input.style.color = ''; // Reset text color
            if (input.hasAttribute('data-placeholder')) {
                input.placeholder = input.getAttribute('data-placeholder'); // Restore original placeholder
                input.removeAttribute('data-placeholder'); // Remove temporary attribute
            }
        });
    });
});

<style>
  	
/* Contact Form Input */
/* Base hover state */
.elementor-form-fields-wrapper input[type="text"]:hover,
.elementor-form-fields-wrapper input[type="email"]:hover,
.elementor-form-fields-wrapper input[type="tel"]:hover,
.elementor-form-fields-wrapper textarea:hover,
.elementor-form-fields-wrapper select:hover {
    border-color: #FFF06C; /* Changes border color to yellow on hover */
}

/* Change placeholder color on hover */
.elementor-form-fields-wrapper input[type="text"]:hover::placeholder,
.elementor-form-fields-wrapper input[type="email"]:hover::placeholder,
.elementor-form-fields-wrapper textarea:hover::placeholder {
    color: #FFF06C; /* Yellow color on hover */
}

/* Base placeholder color, controlled by --placeholder-color variable */
.elementor-form-fields-wrapper input[type="text"]::placeholder,
.elementor-form-fields-wrapper input[type="email"]::placeholder,
.elementor-form-fields-wrapper textarea::placeholder {
    color: var(--placeholder-color, #8B8C8D); /* Default color with fallback */
}

/* Focus state with gradient border */
.elementor-form-fields-wrapper input[type="text"]:focus,
.elementor-form-fields-wrapper input[type="email"]:focus,
.elementor-form-fields-wrapper textarea:focus {
    outline: none; /* Remove default outline */
    border: 1px solid transparent; /* Set transparent border for space */
    border-radius: 8px; /* Rounded corners */
    padding: 10px 16px; /* Adjust padding as needed */
    background-origin: border-box;
    background-clip: padding-box, border-box;
    background-image: linear-gradient(#121316, #121316), /* Inner solid background color */
                      linear-gradient(to right, #FFF06C, #2544F1, #5CA7F2); /* Gradient for the border */
    box-shadow: 0 0 8px 0 #2544F1; /* Glow effect */
}
	
/* Red placeholder color for invalid inputs */
.elementor-form-fields-wrapper input.invalid-placeholder::placeholder,
.elementor-form-fields-wrapper input[type="email"].invalid-placeholder::placeholder,

.elementor-form-fields-wrapper textarea.invalid-placeholder::placeholder {
    color: #ff0000; /* Red color for placeholder when input is invalid */
}	
	
/* Contact Form Input End */	</style>