Styling Dropdown

  • Profile Image
    miryun
    Asked on March 26, 2013 at 07:21 AM

    Hi!

    I just added a Dropdown field at the top of my form and I would like to style it so that it looks just like the other fields below it:

    - no rounded edges

    - no gradient on the background, just plain white

    - light grey color border for the box, just like the rest

    Could you please help me out with this?

    Thanks a lot in advance

  • Profile Image
    moonzkie
    Answered on March 26, 2013 at 09:40 AM

    Hi,

    I believe you are veiwing your form using Safari. Unfortunately, there is no way to modify this look on safari, as this is a browser base setting. But I will continue on researching for an alternative on this and will contact you as soon as I find a solution or a confirmation if this is not possible.

    Here is how your form will look like if viewed in Chrome:

    Thank you.

  • Profile Image
    EduardoMendez
    Answered on March 26, 2013 at 09:51 AM

    To add to my colleague's comment, 

    You can try injecting the following CSS code on to your form:

    .form-dropdown{border-color:#ccc; !important}

    Let us know if that helped!

  • Profile Image
    miryun
    Answered on March 26, 2013 at 10:00 AM

    Hi,

    Thank you for your response, but the screenshot attached was actually from Firefox and not Safari.

    Also, when I currently view my form on Chrome, it looks very different to how it looks on your screenshot.

    Yes, it would be great if you could contact me if you can find a solution or the confirmation that this is not possible.

    Thank you

  • Profile Image
    EduardoMendez
    Answered on March 26, 2013 at 10:12 AM

    Hi there, 

    Have you tried  injecting the following CSS code on to your form:

    .form-dropdown{border-color:#ccc; !important}

    Let us know if that helped!

  • Profile Image
    miryun
    Answered on March 26, 2013 at 12:02 PM

    Hi, I did but it looks very strange with a strong shadow inside the box.

    Is there a way to just get rid of the round edges to make them sharp and make the bos the same height as the rest of the boxes?

    That should be enough

    Thanks!

  • Profile Image
    moonzkie
    Answered on March 26, 2013 at 01:11 PM

    Can you please try to insert these codes. Please let us know if these codes work on your end, since I could not replicate on the said problem on Chrome & Firefox. I have tested it on Safari and it seemed to work. Can you also please share which version of Chrome and Firefox are you using?

    For round corners:

     

    #input_9 {-webkit-appearance: 0px;

    -moz-border-radius: 0px;

    -webkit-border-radius: 0px;

    -khtml-border-radius: 0px;

    border-radius: 0px;

    }

    For field size:

    input, select, option {height:20px}

     

    Hope this helps. Thank you.