What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    can i color the arrow on the drop down menu?

    Asked by snaplash on September 15, 2014 at 10:20 PM

    i am making a form that uses ghost style buttons and would like to change the color of the drop down button to white.

     

    is this possible?

     

    i dont want to change the arrow, but just the color.

     

    thank you again jotform!

    Page URL:
    http://snaplash.com/#SECTION3

    arrow JotForm style and
  • Profile Image
    JotForm Support

    Answered by ashwin_d on September 16, 2014 at 02:32 AM

    Hello snaplash,

    Please be noted that cross-browser customization to change the color of drop down arrow is difficult. Though with a little work around it is possible to achieve your requirement but you will have to use your own image to hide the native drop down arrow.

    As you have already mentioned in your question:  "i dont want to change the arrow, but just the color."

    We can try to find a work around if you are okay to use an arrow image with white color.

    We will wait for your response.

    Thank you!

  • Profile Image

    Answered by snaplash on September 16, 2014 at 10:49 AM

    i would like to try your work around and use my own arrow.

    thank you, please show me how to proceed!

  • Profile Image
    JotForm Support

    Answered by EltonCris on September 16, 2014 at 11:56 AM

    Hi,

    Instead of making the drop down arrow white so it appears invisible, how about removing it? Inject the following CSS codes to your form, that should get rid of the drop down arrow.

    .form-dropdown {

    margin: 0;

    -webkit-appearance: none;

    -moz-appearance: button;

    appearance: none;

    }

    However, if you want to retain the arrow and only change its color, use the following CSS codes. Works properly on Chrome, might not work properly with other browsers.

    .form-dropdown {

    margin: 0;

    -webkit-appearance: none;

    -moz-appearance: button;

    appearance: none;

    -webkit-appearance: menulist-button;

    }

    li[data-type="control_dropdown"] > div {

    position: relative;

    }

    li[data-type="control_dropdown"] > div:before {

    width: 18px;

    content: "";

    display: inline-block;

    top: 1px;

    bottom: 1px;

    right: 1px;

    border-left: 1px solid transparent;

    background-color: #fff;

    -webkit-border-radius: 0 4px 4px 0;

    -moz-border-radius: 0 4px 4px 0;

    border-radius: 0 4px 4px 0;

    background-color: rgba(255, 255, 255, 0);

    position: absolute;

    pointer-events: none;

    cursor: pointer;

    }

    li[data-type="control_dropdown"] > div:after {

    content: "";

    display: inline-block;

    width: 0;

    height: 0;

    border-width: 5px;

    border-color: #FFF transparent transparent transparent;

    position: absolute;

    border-style: solid;

    top: 44%;

    right: 5px;

    pointer-events: none;

    cursor: pointer;

    }

    I have highlighted the arrow color above in blue #FFF (white). Feel free to change it according to your preference.

    Result:

    Disregard the background on this pic.

    Hope this helps!

  • Profile Image

    Answered by snaplash on September 16, 2014 at 12:04 PM

    Thank you for your help, but I am getting two arrow sets with that code on chrome?

  • Profile Image
    JotForm Support

    Answered by ashwin_d on September 16, 2014 at 01:15 PM

    Hello snaplash,

    Please let us know the web page URL where you have embedded your form and we will take a look. I did try to check your website but could not locate the form. All I found was this form :

    We will wait for your response.

    Thank you!

  • Profile Image

    Answered by snaplash on September 16, 2014 at 01:17 PM
  • Profile Image

    Answered by snaplash on September 16, 2014 at 01:18 PM

    or 

     

    http://snaplashwebsite.com/section3.html

  • Profile Image
    JotForm Support

    Answered by david on September 16, 2014 at 02:37 PM

    Hi,

    Changing the first section of CSS code to this:

    .form-dropdown{

    margin: 10;

    -webkit-appearance: none;

    -moz-appearance: button;

    appearance: button;

    -webkit-appearance: button;

    }

    Removed the black button from the dropdown in Chrome, at least in the standalone form.  I'm not sure how it will look on your page though.  Essentially all I changed was the webkit-appearance.  If this still does not produce the desired result, let us know and we will be happy to see what else we can find.