ARTICLE AD BOX
I've been trying for several hours to fix a CSS issue with a form. I want the form to appear in dark mode on smartphones when the site's theme is set to dark mode. So far, that works fine.
The problem is that when the theme is in light mode, everything appears white on smartphones. I'm trying the code below, but it's not fixing the issue. What I want is for the form to look like the third image when the theme is in light mode on mobile, and like the fourth image when in dark mode. Currently, with the code I'm using, it looks like the first and second images.
@media (max-width: 768px) { /* Light mode mobile */ .lecf-field input[type="text"], .lecf-field input[type="email"], .lecf-field input[type="tel"], .lecf-field input[type="url"], .lecf-field input[type="number"], .lecf-field input[type="datetime-local"], .lecf-field select, .lecf-field textarea { background: #f8fafc; border: 1.5px solid #bfc9d7; box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.03); } /* Dark mode mobile override */ .lecf-dark .lecf-field input[type="text"], .lecf-dark .lecf-field input[type="email"], .lecf-dark .lecf-field input[type="tel"], .lecf-dark .lecf-field input[type="url"], .lecf-dark .lecf-field input[type="number"], .lecf-dark .lecf-field input[type="datetime-local"], .lecf-dark .lecf-field select, .lecf-dark .lecf-field textarea { background: rgba(255, 255, 255, 0.04); border: 1.5px solid rgba(255, 255, 255, 0.10); box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.02); color: #fff; } .lecf-dark .lecf-field input::placeholder, .lecf-dark .lecf-field textarea::placeholder { color: rgba(255, 255, 255, 0.45); opacity: 1; } .lecf-dark .lecf-field label { color: rgba(255, 255, 255, 0.82); } }How the image looks now 1 How the image looks now 2 And how I want the image to look 3 And how I want the image to look 4
