Home Forums WoodMart support forum Form field custom CSS

Form field custom CSS

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #50048

    Lateefuddien
    Participant

    Hi there,

    https://www.barbarusa.com/support/
    please click on above link, when i click in any fields it should be highlight in theme’s primary color, but it is not highlighted when i click:
    https://i.gyazo.com/5e6ff4edb4a6cfe3c4aa1988f0257b01.png

    As you can see in the below link that dropdown list’s right side down arrow icon is not showinng:
    https://i.gyazo.com/50812dfa5c9f1ebd408c014f2edc70bc.png

    like this: https://i.gyazo.com/50d04839fcbf34aab4103121a07b7520.png

    please tell me how to do that!

    #50061

    Hello,

    Please contact support of the plugin you use. We do not provide support for third parties plugins even those which are related to our theme. We can suggest a solution, minor CSS customization. As for bugs and customization, please contact plugin support.

    Hope for understanding.

    Best Regards

    #50115

    Lateefuddien
    Participant

    hello, thanks for your response,

    I am not asking you help about third party plugins, as you can see in this link:
    https://i.gyazo.com/94412bf5dac5b0e0d240b357ce9b6d6e.png

    I want two things,
    1. Dropdown icon (Down Arrow) which comes with default html dropdown list, in my case it is not visiblein woodmart theme but it is showing in other websites.

    2. When i click in the field it should be highlighted like as you see in the screenshot.

    Please visit this link:
    https://brokerepair.com/index.php/book-a-service/

    this website i have designed with Divi theme and i added caldera forms, it is showing dropdown list down arrow and it is highlighting the field when i click in it.

    So, i am asking you that, is there some CSS which is overwriting the caldera form’s design?

    #50179

    Artem Temos
    Keymaster

    Try to use the following CSS code

    .form-control {
        -webkit-appearance: menulist;
        -moz-appearance: menulist;
        appearance: menulist;
    }
    
    .caldera-grid .form-control:focus {
        border-color: #66afe9!important;
        outline: 0!important;
        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6)!important;
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6)!important;
    }
    #50199

    Lateefuddien
    Participant

    Awesome! thank you very much! it is working perfect!

    but down arrow icon also showing in the text area field:
    https://i.gyazo.com/40efea4261750d67806c46c754b2bd8c.png
    https://i.gyazo.com/b1f73048c368fdf8e3a76c6dc2d67b0e.png

    How to remove it?

    You can see it in these pages:
    https://www.barbarusa.com/support/
    https://www.barbarusa.com/contact-us/

    #50203

    Artem Temos
    Keymaster

    Try to replace this part

    .form-control {
        -webkit-appearance: menulist;
        -moz-appearance: menulist;
        appearance: menulist;
    }

    with this one

    select.form-control {
        -webkit-appearance: menulist;
        -moz-appearance: menulist;
        appearance: menulist;
    }
    #50204

    Lateefuddien
    Participant

    Quick response as always..!

    Thanks a lot!

    it’s working…!

    #50219

    Hello,

    You are always welcome. If you have any questions feel free to contact us.

    Best Regards

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

The topic ‘Form field custom CSS’ is closed to new replies.