Trying to Style the Enhanced user interface for Drop Downs?

Hello,

I’m trying to style the Enable enhanced user interface option for the drop down fields, I seem to not be able to style the correct items, or maybe I’m doing it wrong, once the form loads it pulls in my styles but then loads the jquery styles. Is there anyway for us to over write these styles, I would love to keep the theme of my fields all the same including these as well. I have tried to style all of the following but it is still overwritting what I have done?

.gform_wrapper .chosen-container-active.chosen-with-drop .chosen-single {
    /* style here */
}

.gform_wrapper .chosen-container-active .chosen-single {
    /* style here */
}

.gform_wrapper .chosen-container-single .chosen-single {
/* style here */
}

I would guess maybe the selectors need a bit more specificity to override what is already being applied. For what it’s worth, this is my working CSS for the dropdown. Maybe you’ll find some useful

/* CHOSEN DROPDOWN */
.gform_wrapper .ginput_list .chosen-container {
	font-size: inherit;
}

.gform_wrapper .chosen-container-single a.chosen-single {
	color: var(--gravityforms-color-dark);
	border: 2px solid var(--gravityforms-color-dark);
	border-radius: 3px;
	/* padding: 5px 10px; */
	height: var(--gravityforms-field-general-height);
	background: var(--gravityforms-color-lightest);
	line-height: 1.5;
	top: 2px;
	box-shadow: none;
}

.gform_wrapper .chosen-container-single .chosen-single span {
	margin: calc((var(--gravityforms-field-general-height) - (2 * var(--gravityforms-field-general-box-shadow-width)) - 1.5em) / 2);
	color: var(--gravityforms-color-dark);
}

.gform_wrapper .chosen-container-single.chosen-container-active a.chosen-single {
	border: 2px solid var(--gravityforms-color-dark);
	background-color: var(--gravityforms-color-light);
	outline: 0;
	background-image: none;
	box-shadow: none;
}

.gform_wrapper .chosen-container-single a.chosen-single>div {
	display: none;
}

.gform_wrapper .chosen-container-single div.chosen-search input[type=text] {
	background-color: var(--gravityforms-color-lightest);
	background-image: none !important;
}

.gform_wrapper .chosen-container-single div.chosen-drop {
	border: 2px solid var(--gravityforms-color-dark);
	background-color: var(--gravityforms-color-light);
	border-top: 0;
	border-radius: 0 0 4px 4px;
}

.gform_wrapper .chosen-container ul.chosen-results li {
	color: var(--gravityforms-color-medium);
}

.gform_wrapper .chosen-container ul.chosen-results li.highlighted {
	background-color: var(--gravityforms-color-lightest);
	background-image: none;
	color: var(--gravityforms-color-accent);
}

.gform_wrapper .chosen-container-single a.chosen-single span:after,
.gform_wrapper .chosen-container-single.chosen-container-active a.chosen-single span:after,
.gform_wrapper .chosen-container-single div.chosen-search:after {
	display: inline-block;
	font-family: "Material Design Icons";
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	text-rendering: auto;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.gform_wrapper .chosen-container-single a.chosen-single span:after {
	content: '\f572';
	position: absolute;
	right: .75em;
	font-size: 1.5em;
	top: calc((var(--gravityforms-field-general-height) / 2) - .75rem);
}

.gform_wrapper .chosen-container-single.chosen-container-active a.chosen-single span:after {
	content: '\f157';
}

.gform_wrapper .chosen-container-single div.chosen-search:after {
	content: '\f349';
	position: relative;
	left: -2.25em;
}

.gf_simply_enhance_select .chosen-search {
	display: none;
}

@media only screen and (max-width: 641px) {
	.gform_wrapper.gf_browser_chrome .chosen-container-single .chosen-single, .gform_wrapper.gf_browser_gecko .chosen-container-single .chosen-single, .gform_wrapper.gf_browser_safari .chosen-container-single .chosen-single {
		line-height: 2.25 !important;
	}

	.gform_wrapper.gf_browser_chrome .chosen-container-single .chosen-single span:after, .gform_wrapper.gf_browser_gecko .chosen-container-single .chosen-single span:after, .gform_wrapper.gf_browser_safari .chosen-container-single .chosen-single span:after {
		top: 1em;
	}
}
1 Like

That did it, I just need to style it now, but that helped a ton, I will have to look more into using more selectors from now on. Thank you very much!

1 Like

Thanks for the hints here. I’ve managed to get a long way down the road with this but an stuck with styling out the icons as shown in the pic. Any ideas?

sorted it:

.gform_wrapper .chosen-container-single .chosen-search input[type=text]{
background-image: none!important;
}

1 Like