can i color the arrow on the drop down menu?

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!

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!

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

thank you, please show me how to proceed!

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!

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

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!

http://snaplash.com/#SECTION3 

or 

 

http://snaplashwebsite.com/section3.html

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.