Trying to Style the Enhanced user interface for Drop Downs?

Get Help
, ,
2

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