-
Molsen66Asked on May 16, 2018 at 8:51 AM
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
-
AdrianReplied on May 16, 2018 at 10:34 AM
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/73041306697861If 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:
-
Molsen66Replied on May 17, 2018 at 12:38 AM
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
-
AdrianReplied on May 17, 2018 at 5:41 AM
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: