If you're using the native Divi contact form and want the styling of the entered text to remain consistent after being filled out, you'll need a bit of custom CSS. By default, the entered text in fields may revert to the lighter color used for placeholder text once you move focus away from the field. Here's how you can ensure it maintains the chosen style even after the user fills out and unfocuses from the field.
Before
After
Custom CSS for Styling Entered Text
To set the styles for entered text in input, textarea, and select boxes so that it remains styled (e.g., color, opacity) after being filled out, you can use the following CSS:
.et_pb_contact_form input:not(:placeholder-shown),
.et_pb_contact_form textarea:not(:placeholder-shown),
.et_pb_contact_form select:has(:not(option[value=""]):checked) {
color: #000000; /* Adjust the color as needed */
}Related Post: Adding CSS to the Divi Theme
input:not(:placeholder-shown): Targets input fields that are no longer showing placeholder text.textarea:not(:placeholder-shown): Targets text areas that are no longer showing placeholder text.select:has(:not(option[value=""]):checked): Targets select boxes that have non-default options selected.
Make sure to set the color property to the value you want the entered text to have.
By applying the above CSS, you can achieve a consistent look in your Divi contact form, ensuring that entered text maintains the desired style even after a field loses focus.
0 Comments