I can’t seem to increase the font size for the placeholder as well as the options for a dropdown. We have “enhanced user interface” enabled and I don’t know if that changes what I need to target with CSS.
You can see the form here - https://snagalot.com/land-buyers-quiz/
We are using a plugin that auto-advances when option is selected so there is no Next button.
Any help would be appreciated! Thanks so much!
Here is a post addressing a similar styling issue had by another user. This is my solution. For them, it seemed to be an issue of selector specificity in CSS.
Hello. Can you help me? Your post is the only one that comes up when I search for my question. (This is a workaround to styling the placeholder on the drop down list.)
I am trying to style the first option in the drop down list, so that it stays grey even when it is selected. I can assign a # value to that option, as all other options have text values.
Is it possible to identify that option by its value and style it so it is always grey?
I have succeeded in styling the option list so that the first item is always grey, but can’t find a solution to the keeping that option grey when it is selected.
I am not a developer, but know some CSS. However, the CSS provided above is a bit beyond me.
Thank you for any help you can provide.
Hope this helps. The code below is a snippet I use for my forms. I also targeted the field in your drop-down as well for you.
/* This targets the first field only */
#gform_wrapper_4 .chosen-container-single a.chosen-single #field_4_1 {
font-size: 30px !important;
background: darkgray!important;
color: black!important;
}
/* This styles is for the enhanced multi select choices after chosen. */
.gform_wrapper .chosen-container-multi .chosen-choices li.search-choice {
position: relative;
margin: 3px 5px 3px 0;
max-width: 100%;
border-radius: 3px;
background-image: none !important;
background-size: 100% 19px;
background-repeat: repeat-x;
background-clip: padding-box;
background-image: none;
line-height: 13px;
cursor: default;
background-color: rgba(227,227,227,0.26) !important;
color: white !important;
padding: 5px !important;
box-shadow: none !important;
border-width: 0px;
border-color: rgba(227,227,227,0.26) !important;
padding-right: 20px !important;
padding-left: 20px !important;
}
/* This styles is for the enhanced multi select choices field input background. */
.gform_wrapper .chosen-container-multi .chosen-choices {
border-radius: 7px !important;
background: #121212;
color: rgba(227,227,227,0.26);
font-family: system-ui, sans-serif;
line-height: 1.5;
backdrop-filter: blur(10px);
background-color: #121212 !important;
border-color: #121212 !important;
border-width: 1px;
border-style: none;
}
/* This styles is for the enhanced multi select drop down .*/
.gform_wrapper .chosen-container .chosen-drop {
position: absolute;
top: 100%;
width: 100%;
border-top: 0;
background: #121212;
box-shadow: 0 4px 5px rgb(0 0 0 / 15%);
display: none;
background-color: #121212 !important;
z-index: 9999999999;
margin-bottom: 30px !important;
padding-bottom: 19px;
border-radius: 10px;
border-width: 0px;
border-color: #121212;
}
/* This styles is for the enhanced multi select drop down background. */
.gform_wrapper .chosen-container .chosen-results li.active-result {
background: #121212;
}
/* This styles is for the enhanced multi select drop down individual items on hover. */
.gform_wrapper .chosen-container .chosen-results li.active-result:hover {
background: rgba(227,227,227,0.26);
border-radius: 4px;
cursor: pointer;
}
Also, looking at your form the way it is styled now, it may be difficult to help you target a specific option in the drop-down once selected. This is the Id of the first field, however.
#field_4_1
If you don’t want to use the full snippet I shared above and only want to target your first field, you could try something like this only:
#gform_wrapper_4 .chosen-container-single a.chosen-single #field_4_1 {font-size:30px !important;background:darkgray!important;color:black!important;}
Hello – thank you so much for responding. I tried some of your snippet, and also the one at the bottom to target my first field, but could not get anything to respond.
Here’s what works to change font color for any option in the select box. I’m trying to specify a value so that only the option with a specific value changes to that color, and all others are not affected. Is that possible?
body .gform_wrapper .gform_body .gform_fields .gfield select {
color: rgba(0,56,132,0.5) !important;
}
The option I am targeting has a value of “0”, but I can change that to anything.
I don’t believe the value input will affect the CSS ID or class of the individual option upon saving the form. You can style the options that are chosen after they are chosen but to my knowledge, it is not possible to style one specific option only inside of your enhanced drop-down field.
Is this making any sense to you?
If you change your drop down to a multi-select field then perhaps you can have additional styling options but your form may not need multiple choices. I do apologize my CSS above is designed for a multi-select drop-down using the enhanced user interface option. That is probably why the CSS had little to no effect.
Yes, it is making sense. And thanks so much. Unfortunately, I can’t change to multi-select as only one answer is possible. We have extensive algorithms written based on the answer.
I’ve been searching everywhere, so have seen a lot of different attempts at this.
GF said they could not style the select placeholder because it is a browser issue. So now I am trying to style the first option on the list, as a workaround.
Can you try this out? This style’s placeholders, although it will not work for your workaround. We can also try appending this placeholder pseudo-class to the specific field but as of right now your drop-down does not have any placeholder text, only options.
/* This styles Placeholder text */
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: darkgray;
font-size:32px;
}
::-moz-placeholder { /* Firefox 19+ */
color: darkgray;
font-size:32px;
}
:-ms-input-placeholder { /* IE 10+ */
color: darkgray;
font-size:32px;
}
:-moz-placeholder { /* Firefox 18- */
color: darkgray;
font-size:32px;
}
Thank you! I tried this one before, but did it again just in case I messed it up before. Alas, no! It styles all of the placeholders EXCEPT the one for “select”. LOL This thing is very stubborn.
I saw one example where someone styled a drop down so that every option had a different style, but I think he used JS or JQuery. That is likely the only way to do this.
Let’s try one more time.
body .gform_wrapper .gform_body .gform_fields .gfield select::-webkit-input-placeholder {
color: darkgray;
font-size:32px;
}
body .gform_wrapper .gform_body .gform_fields .gfield select::-moz-placeholder {
color: darkgray;
font-size:32px;
}
body .gform_wrapper .gform_body .gform_fields .gfield select:-ms-input-placeholder {
color: darkgray;
font-size:32px;
}
body .gform_wrapper .gform_body .gform_fields .gfield select:-moz-placeholder {
color: darkgray;
font-size:32px;
}
Although, I don’t think your current drop-down is using a placeholder. I think that is an option.
Hi again – unfortunately, no. It doesn’t work. But thank you so much for trying.
The form has numerous drop downs all using placeholders, as that is the existing design. I just added the test field for the first-item-on-option-list method, so I could test a workaround. I can easily use either method. It is not a lot of work to modify the form to one method or the other. So whatever works is what I will use.
I just tried this on my form. See screenshot. It is a drop down field with the enhanced drop down option enabled. The placeholder is styled before and after you select it.
.gform_wrapper.gravity-theme .chosen-container-single .chosen-single {
background:darkgray!important;
color:white!important;
}
And after you click the placeholder it stays the same. With this CSS
.gform_wrapper.gravity-theme .chosen-container-active.chosen-with-drop .chosen-single {
background-image: none !important;
}
Hi – Thanks again – I got the code to work, but it doesn’t do what we are aiming for. We are trying to get either the placeholder or the first item on the option list to stay grey.
The enhanced UI does some strange things to the select box and option list when enabled. We would have to add CSS to put back the original styling.
We are able to style the select box using “select” (no enhanced UI). The problem is the placeholder, which we want to style differently from the rest of the list.
Here’s what we did with the option list below the select box. We were able to style the placeholder to stay grey in the option list, no matter what was selected.
/* DROP DOWN STYLING - OPTION LIST PORTION /
/ Sets and maintains color of placeholder question */
body .gform_wrapper .gform_body .gform_fields .gfield option {
color: rgba(0,56,132,1);
}
body .gform_wrapper .gform_body .gform_fields .gfield option:first-of-type {
color: rgba(0,56,132,0.5);
}
.gform_wrapper .chosen-container .chosen-results li.active-result:first-of-type {
background:darkgray!important;
color:white!important;
}
That works for enhanced dropdowns. Will this work for you?
Hi - thanks. No, not working to differentiate the first option. Using enhanced UI, if we set font color, it shows up as background color on the list, and font color in the select box. The same for all options.
Perhaps then I am misunderstanding. Do you not want the first option to be gray and stay gray while the other options are different? This is a screenshot of the code above being applied to a Gravity Form. It styles the placeholder.
Hi – sorry for the confusion. I’ve detailed the problem below. Hopefully, I’ve managed to be more clear.
We are trying to set up 2 things, one of which we have achieved.
OPTION LIST: We can style the option list itself so that the placeholder on the option list has a grey font color against a white background, regardless of what is selected. We have the code working for this.
SELECT BOX: This is the problem. When we select from the option list, we want all selections to show up in black font in the active select box, EXCEPT for the placeholder. We want the placeholder, when selected to be grey font. We also want the placeholder to be grey when nothing has been selected, and the select box shows the placeholder as default.
The problem is that the placeholder shows up as black font whenever it is in the active select box, the same as all other options.
We are searching for code that enables us to target the placeholder in some way, and make the placeholder font grey when it is in the active select box. Either that, or we can use the first option on the list as the placeholder, and target that option to be grey when in the active select box.
We can’t get either method. We can easily style all the options to be grey font or black font. We cannot select only the placeholder to be grey font.
I’m beginning to think it will need JS to set a conditional for a specific label or value, and apply the grey font styling to the select box only when that label is selected.
So this will make the placeholder gray on load. It makes the placeholder gray when viewing the options in the drop-down. And all other field options besides the placeholder will be a different color than the placeholder when viewing them in the drop-down. Lastly, when you select an option that is not the placeholder, the background will change from gray to transparent in the active field section.
You will need to add the font-size and color for your text as needed. (Didn’t see the specific color above)
However, if someone were to select the placeholder as an option, which I am not sure as to why someone would, the placeholder would not be gray again, it will follow suit with the other selected items. Add the CSS below to see if this will work for you. It is the closest I will be able to get to your complete solution.
.gform_wrapper.gravity-theme .chosen-container-active .chosen-single:first-of-type {
background:none;
}
.gform_wrapper .chosen-container-multi .chosen-choices li.search-choice:first-of-type {
background:darkgray!important;
color:white!important;
}
.gform_wrapper .chosen-container .chosen-results li.active-result:first-of-type {
background:darkgray!important;
color:white!important;
}
Sorry wasn’t able to figure out how to make the placeholder go back to dark gray if someone were to select the placeholder from the drop-down.
Hi – thank you again. I really appreciate all the help!
Unfortunately, the last snippet doesn’t work with or without enhanced UI. I don’t think .chosen is working. I’m going to give this a break and come back to it later.
I may have to go through all the other CSS for these forms to see if anything conflicts. We have several very large forms fully styled – so it could be something else interfering with these classes.