I want to change the 'blue' color that appears on hover in the dropdown list [RESOLVED]

Get Help
, ,
1

I want to change the ‘blue’ color that appears on hover in the dropdown list. i tried other css codes in the form but it didn’t work. I want this change to appear in all browsers including Chrome.
Screenshot_2

Below are some codes that I tried and didn’t work.

option {
background: #1b1a1a !important;
color: #357b1d !important;
}
select {
background: #1b1a1a !important;
color: #357b1d !important;
}

// If you also want to theme your text inputs:
input {
background: #1b1a1a !important;
color: #357b1d !important;
}

2

This browser control is generally hard to change with CSS alone. What is the URL of the page on your site where we can see the form and test it?

4
5

In Firefox, on Windows 10, this is what I see: hxJ73t6Iqv.png - Droplr

Chrome on Windows 10: hp9QqNcXVZ.png - Droplr

Here is a good discussion of what is possible (and how) and what is not:

I don’t know of a way to override that with CSS alone, but I will leave this open in case someone else has a suggestion on how to do it.

6

not just css. It can also be done with javascript. Can you give me a suggestion to fix this?

7

Yes, I think it is possible with JavaScript and possibly CSS. That customization is outside of what we can normally handle in support or these community forums. Have you looked at the StackExchange discussion I linked to? That offered some suggestions, all of which would require customization.

8

I’m not sure that is possible with the Gravity Forms dropdown field. However, if you will enable the enhanced user interface for your dropdown and use the CSS below, I believe you will have what you are wanting. Here is the screenshot of the expected output:

Screen Shot 2022-01-20 at 8.48.49 PM
Screen Shot 2022-01-20 at 8.48.49 PM630×730 26.2 KB

And here is the CSS:

.gform_wrapper.gravity-theme .chosen-container-single .chosen-search {
	display: none;
}
.gform_wrapper.gravity-theme .chosen-container .chosen-results li.highlighted {
	background: #1b1a1a;
	color: #357b1d;
}
.gform_wrapper.gravity-theme .chosen-container-single .chosen-single {
	background: none;
	background-clip: none;
	box-shadow: none;
	border-color: black;
}

.gform_wrapper.gravity-theme .chosen-container-active.chosen-with-drop .chosen-single {
	background: none;
	background-clip: none;
	box-shadow: none;
}

.gform_wrapper.gravity-theme .chosen-container-active.chosen-with-drop .chosen-single {
    background: none;
    background-clip: none;
    box-shadow: none;
    border-style: none;
    border-bottom-style: solid;
    border-bottom-width: 3px;
    border-bottom-color: #111111 !important;
	margin-bottom: 10px
}
.gform_wrapper.gravity-theme .chosen-container .chosen-results li.active-result {
	font-size: 20px;
	padding: 10px;
}
2 Likes
9

Your help solved my problem completely, thanks.

I activated the following option from the settings for my form.
Admin Dashboard > Forms > “Form Nam” > Select Field > Appearance > "Enable enhanced user interface = Enable"

later
Admin Dashboard > Appearance > Customize > Additional CSS

.gform_wrapper.gravity-theme .chosen-container-single .chosen-search {
	display: none;
}
.gform_wrapper.gravity-theme .chosen-container .chosen-results li.highlighted {
	background: #1b1a1a;
	color: #fff;
}


.gform_wrapper.gravity-theme .chosen-container-active.chosen-with-drop .chosen-single {
	background: none;
	background-clip: none;
	box-shadow: none;
}

.gform_wrapper.gravity-theme .chosen-container-active.chosen-with-drop .chosen-single {
    background: none;
    background-clip: none;
    box-shadow: none;
    border-style: none;
    border-bottom-style: solid;
    border-bottom-width: 3px;
    border-bottom-color: #111111 !important;
	margin-bottom: 10px
}

I pasted the code you gave me and my problem was solved perfectly.

2 Likes
10

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.