Arrows on Drop Down Select

Home Forums Quform WordPress Arrows on Drop Down Select

This topic is: resolved
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #26661
    nathanjrb
    Participant

    Hi There,

    I’m not sure if I’m seeing these changes because I have just updated my theme (UNCODE – https://undsgn.com/uncode/).

    I have an issue with drop downs, where the down arrows are appearing multiple times. Please see attached screenshots.

    I have tried enabling the “Enhanced Select” option under styles and that sort of fixes it. It doesn’t fix the “Title” fields though.

    When you hover the cursor over it, it goes away.

    Link to one of the forms in question: https://www.nathanbuckfilms.co.uk/contact/

    Please can you advise?

    Thanks,

    Nathan

    Attachments:
    You must be logged in to view attached files.
    #26670
    katw
    Participant

    Hi @nathanjrb

    Thought I could help out.

    Yes the issue is coming from your theme stylesheet: /themes/uncode/library/css/style.css.

    It has a css style called .style-light select:not([multiple]) which is doing a repeat background on form single select fields.

    You need to override by adding something like:

    .quform select:not([multiple]) {
      background-image: no-repeat;
      background-position: 10% center;
    }

    This needs to go in your child stylesheet or customiser additional css. Don’t edit the theme directly.

    The .quform class prefix means any quform form will no longer be affected by the repeat issue on single select popup fields.

    You are likely to find others similar to this as you add other form field types.

    #26681
    nathanjrb
    Participant

    Hi,

    Thanks for this! I tried it but it didn’t quite work. The Uncode support team suggested:

    .style-light select:not([multiple]) {background-repeat: no-repeat !important; background-position: right !important;}

    …and it worked a treat.

    Just the red tool tips to solve now! 🙂

    Thanks,

    Nathan

    #26683
    katw
    Participant

    What I suggested was correct.

    You just needed the !important to force it to change.

    The prefix I used on my answer .quform was to limit the change to pages with Quform forms.

    Whereas, they have given you code that will apply across the site on all forms.

    Anyhow, glad its working

    #26686
    nathanjrb
    Participant

    Hi Katw,

    I understand, thank you. I do appreciate your help all the same and I may wish to limit it to just Quform forms in the future if things go wrong, so this was still helpful.

    Thanks,

    Nathan

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.
Be inspired. © 2024 ThemeCatcher Ltd. 20-22 Wenlock Road, London, England, N1 7GU | Company No. 08120384 | Built with React | Privacy Policy