Can you kindly provide a CSS Rule that will allow me to remove the container shadow (white transition area) and the light-gray border line that appears when visitors click the “Write your message…” container (i.e., field)? Details: Screenshot by Lightshot
Specifically: When clicked, I would like the container to look like the “Name” and “Email” fields of our chatbox form. Details (no shadow and no extra gray border line, just a light blue border line): Screenshot by Lightshot
Note: I was able to remove the white transition area by using the the CSS Rule provide below, but I have a feeling there’s a better way to do it.
Thank you for your question! I think the solution to this matter will be so useful for others
As for your CSS solution, I see that you used temporary CSS classes which are auto-generated and may change.
If you’d like to learn more about stable and temporary CSS classes and how to choose the correct ones for your customizations, feel free to take a look at our Guide to CSS Codes for Elfsight Widgets
I checked this with the dev team, and they provided CSS codes for both requests – please see them below.
Remove the white shadow above the text field [class*='scrollable-container__ScrollableContainer-sc'] { mask-image: none; }
Remove the gray shadow boarder around an active text field .es-interaction-field-container { box-shadow: none; }
Please add these codes to the Custom CSS section of your widget and enjoy the customised result
