+4
I have a client who would like to change the text formatting of one option in a dropdown menu. Anyone have ideas about how to best accomplish this?
In this example, he would like the option for "*add a new vendor" to be bold and possibly a different color.
Any assistance or direction is much appreciated.
Thanks!
Brian
+11
Hi Brian,
I'm really curious if this is possible. So hopefully someone can come up with a cool solution.
I've tried a few things and haven't been able to do it.
Vadim
+11
Hi Brian,
I haven't been able to change the font, but I figured out a way to change the background color and font color.
Firstly, I opened the Choice control, expanded the Formatting section and for Control CSS Class, I set it to cssMyOptions.
Close it and open the Form Settings and expand the Custom CSS section. Add the following:
.cssMyOptions option:first-child {
background-color: red;
color: white;
}
This will find the Select (choice) and then the first option and it will change the background color to red and the font color to white.
cheers,
Vadim
+7
In addition, if you have to apply it on another option than the first one, you could use a JavaScript in order to select the <option/> you want to color and add a CSS class on it.
NWF.FormFiller.Event.RegisterAfterReady(function()
{
NWF$(".cssMyOptions").find("option").each(function()
{
if(NWF$(this).text() == "add a new vendor")
{
NWF$(this).addClass(".my-option-highlighter");
}
});
});
+4
Nice... I had previously been trying to do this using a CSS selector for the text value of that option, but I wasn't having any luck with that approach. I hope to have a few minutes to give this a try today or tomorrow. Thank you Vadim Tabakman and Pierre Fudala for the replies!
+4
Not sure why I was not able to get that to work using first-child. I put it in there exactly as you had it, but this is lookup control, so maybe that works a little differently than a choice control. I was able to get it to work using this for my custom CSS:
.cssMyOptions option[title="*add a new vendor"] {
color: red;
}
EDIT: I forgot to add that this worked with the custom class added to the "CSS class" field in the control settings along with the standard nf classes, but not in the "Control CSS class".
+11
Glad you got it working finally 
+4
Yeah, me too... the site owner was really happy about this. I love seeing how different people approach these things. Usually there are a few ways to accomplish the goal and I love that we can tap into the expertise of the community for guidance. 
Enter your username or e-mail address. We'll send you an e-mail with instructions to reset your password.