Home › Forums › WoodMart support forum › Form field custom CSS

Form field custom CSS

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • March 30, 2018 at 10:24 am #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!

    March 30, 2018 at 11:41 am #50061

    Elise Noromit
    Member

    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

    March 30, 2018 at 3:42 pm #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?

    March 31, 2018 at 1:54 pm #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;
}
    March 31, 2018 at 2:35 pm #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/

    March 31, 2018 at 3:24 pm #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;
}
    March 31, 2018 at 3:27 pm #50204

    Lateefuddien
    Participant

    Quick response as always..!

    Thanks a lot!

    it’s working…!

    March 31, 2018 at 4:40 pm #50219

    Elise Noromit
    Member

    Hello,

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

    Best Regards

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

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