can i color the arrow on the drop down menu?

  • Profile Image
    snaplash
    Asked 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!

  • Profile Image
    ashwin_d
    Answered 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
    snaplash
    Answered 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
    EltonCris
    Answered 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
    snaplash
    Answered 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
    ashwin_d
    Answered 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
    snaplash
    Answered on September 16, 2014 at 01:17 PM
  • Profile Image
    snaplash
    Answered on September 16, 2014 at 01:18 PM

    or 

     

    http://snaplashwebsite.com/section3.html

  • Profile Image
    david
    Answered 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.