white text in input fields issue

  • kdaisyk

    (@kdaisyk)


    5 years, 2 months ago

    Hi, I am having an issue with white text so you cannot see what you are writing on my form until you click into a different field – the writing is then visible in black. I have tried to update the CSS Classes codes with the following x3 different codes but none have fixed the issue:
    -1-
    body div.wpforms-container-full .wpforms-form input[type=date], body div.wpforms-container-full .wpforms-form input[type=datetime], body div.wpforms-container-full .wpforms-form input[type=datetime-local], body div.wpforms-container-full .wpforms-form input[type=email], body div.wpforms-container-full .wpforms-form input[type=month], body div.wpforms-container-full .wpforms-form input[type=number], body div.wpforms-container-full .wpforms-form input[type=password], body div.wpforms-container-full .wpforms-form input[type=range], body div.wpforms-container-full .wpforms-form input[type=search], body div.wpforms-container-full .wpforms-form input[type=tel], body div.wpforms-container-full .wpforms-form input[type=text], body div.wpforms-container-full .wpforms-form input[type=time], body div.wpforms-container-full .wpforms-form input[type=url], body div.wpforms-container-full .wpforms-form input[type=week], body div.wpforms-container-full .wpforms-form select, body div.wpforms-container-full .wpforms-form textarea {color: #000 !important;}

    -2-
    .wpforms-title, div.wpforms-container-full .wpforms-form .wpforms-field-label, div.wpforms-container-full .wpforms-form .wpforms-field-sublabel {display: block;}

    -3-
    body div.wpforms-container-full .wpforms-form input[type=date], body div.wpforms-container-full .wpforms-form input[type=datetime], body div.wpforms-container-full .wpforms-form input[type=datetime-local], body div.wpforms-container-full .wpforms-form input[type=email], body div.wpforms-container-full .wpforms-form input[type=month], body div.wpforms-container-full .wpforms-form input[type=number], body div.wpforms-container-full .wpforms-form input[type=password], body div.wpforms-container-full .wpforms-form input[type=range], body div.wpforms-container-full .wpforms-form input[type=search], body div.wpforms-container-full .wpforms-form input[type=tel], body div.wpforms-container-full .wpforms-form input[type=text], body div.wpforms-container-full .wpforms-form input[type=time], body div.wpforms-container-full .wpforms-form input[type=url], body div.wpforms-container-full .wpforms-form input[type=week], body div.wpforms-container-full .wpforms-form select, body div.wpforms-container-full .wpforms-form textarea {color: #000;}

    Help would be much appreciated! My website is not live yet…

Viewing 8 replies - 1 through 8 (of 8 total)
  • George Appiah

    (@gappiah)

    5 years, 2 months ago

    Provide the URL to the page where the problem is occurring, then we can help you resolve it. It’s impossible to help otherwise.

    Thread Starter kdaisyk

    (@kdaisyk)

    5 years, 2 months ago

    https://optimaspeechtherapy.com/order-here/

    and

    https://optimaspeechtherapy.com/speech-and-language-therapist/

    thanks 🙂

    George Appiah

    (@gappiah)

    5 years, 2 months ago

    The problem is coming from your theme, and not WPForms. As you can see from the screenshot below, the following CSS is defined in your theme (extracted from a broader selection).

    input[type="text"]:focus {
color: white !important;
}

    In this specific case, when a text input field is in focus (ie when selected), the color is FORCED to be white (with !important), that’s why your black color defined elsewhere isn’t working.

    Use the following CSS code in APPEARANCE => CUSTOMIZE => ADDITIONAL CSS to override this behaviour. Alternatively, if you built this custom theme yourself or you’re are comfortable editing CSS files, you may want to simply remove the !important from this block of code in your source CSS file, so WPForms’ style can be applied.

    textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {
  color: #000 !important;
}

    (The above takes care of all the input selectors defined in your theme. If you’re sure you’ll never use some of these input types in your forms (eg date/time pickers), feel free to remove the corresponding line(s) from the above code.)

    Good luck!

    Thread Starter kdaisyk

    (@kdaisyk)

    5 years, 2 months ago

    Thanks for your reply, just wondering which CSS code I update. I have the following options in my theme:

    slick-5.css
    style-optima-29.css

    Thanks again

    George Appiah

    (@gappiah)

    5 years, 2 months ago

    The code is in style-optima-29.css. I wanted to check the beginning line number for you, but it seems your site is in maintenance mode now.

    (And I thought I had included a screenshot in my previous response, but it looks like my cat ate the screenshot 😀 )

    Thread Starter kdaisyk

    (@kdaisyk)

    5 years, 2 months ago

    Hi, sorry it’s live now

    George Appiah

    (@gappiah)

    5 years, 2 months ago

    Thread Starter kdaisyk

    (@kdaisyk)

    5 years, 2 months ago

    Thanks for your help. I will try to remove the ‘!important’

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘white text in input fields issue’ is closed to new replies.