Styles.css Issues with Input Field Clear Option

  • Author
    Posts
  • #147469

    dailycdev
    Member

    I have an input field on many of my pages on my site, including the ministries page…
    https://dailycdev.com/ministries/

    However, the clear “X” option doesn’t appear after typing in text in the search field.
    This is because of your Styles.css file.
    In the textarea:focus, background is specified, which is causing this.
    If you simply changed it to background-color, the clear X now works like normal.
    Here is the specific css option in the styles.css that needs updated….
    textarea:focus {
    outline: none;
    border-color: #000000;
    background: #ffffff;
    color: #1a1a1a;
    }

    If you simply update background to background-color, the clear X works like normal…
    textarea:focus {
    outline: none;
    border-color: #000000;
    background-color: #ffffff;
    color: #1a1a1a;
    }

    To see this in action, go to that Ministries page and click F12 on your keyboard.
    Then, go to sources tab > dailycdev.com > wp-content > themes/label > assets/js > styles.css, and scroll down to textarea:focus. From there, change background to background-color and it will make the clear X option show up, after typing some text in the search field.
    Anyhow, I’d update this in the theme, but I only have read access, being in wordpress.com. If you were to grant me write access, I’ll go ahead and fix this myself. Thanks.
    -Paul

    The blog I need help with is dailycdev.com.

    #147767

    binarymoon
    Theme Author

    Hi there – thanks for the report and the explanation of a fix. I’ve tweaked the theme so that it displays the (x) for clearing the search field.

    #147797

    dailycdev
    Member

    I see what you did, but now there is a weird blue X that pops up next to the true X popup that actually works. Please check out the video to see the issue for yourself.
    https://1drv.ms/v/s!AtzxGqXDzsbBicV3WquVzKgaZugsXQ?e=VhjQij

    #147868

    binarymoon
    Theme Author

    That is happening because the browser has a built in ‘clear’ button. It looks like your plugin is trying to override this or change the style of it.

    My fix made the button show up as intended. There’s info here on how to hide that, but I don’t know what it will do to the button added by your plugin:
    https://w3reign.com/remove-ie-clear-field-or-cross-x-button-from-inputs-field/

The topic ‘Styles.css Issues with Input Field Clear Option’ is closed to new replies.