How to style Dropdown Widget (Custom CSS)?

Hi there,

I have two user contributed dropdown widgets in my form and they look different to all my other dropdown options in the form.

This widget has its own CSS tab that I believe I could use to change the appearance of those dropdown's to match the rest of the dropdown's I have within the current form.

Would you be able to tell me what CSS I would need to enter to have the user contributed dropdown's look the same as the regular dropdown's within the form?

Cheers,

Marty

I can see that you have many forms in your account.

Can you please provide us with the Form URLs that have those dropdown widget fields?
(Where-to-Find-My-Form-URL)

Is this one of the forms that you are talking about?
http://www.jotform.co/form/73041306697861

If this is the case, please inject the following CSS to each dropdown widget in your forms.

#dropdown > span {
  background-color: white !important;
  border: 1px solid #a6a6a6 !important;
  border-radius: 6px !important;
}

Result:

Hi there,

Ah no its not that form.

I have made a test form so you can see which widget I'm using.

https://form.jotform.co/81101312444844

Marty

Inject the following CSS to the Widget to make it look the same as the other Dropdown field.

select#user-option-list {

  -webkit-appearance: none;

  -moz-appearance: button;

  appearance: none;

  padding: 3px;

  padding-left: 5px;

  border: 1px solid #a6a6a6;

  border-radius: 0;

}

#user-option-list-container:before {

    width: 18px;

    content: "";

    display: inline-block;

    top: 1px;

    bottom: 1px;

    right: 1px;

    border-left: 1px solid #828282;

    background-color: #fff;

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

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

    border-radius: 0 4px 4px 0;

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

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

    border-radius: 0 0px 0px 0;

    position: absolute;

    pointer-events: none;

    cursor: pointer;

}

#user-option-list-container:after {

    content: "";

    display: inline-block;

    width: 0;

    height: 0;

    border-width: 5px;

    border-color: #828282 transparent 

    transparent transparent;

    position: absolute;

    border-style: solid;

    top: 44%;

    right: 5px;

    pointer-events: none;

    cursor: pointer;

}

(How-to-Inject-CSS-Codes-to-Widgets)

Cloned Form URL: https://form.jotform.com/81362113653955

Result: