Changing the color of the Search Box select

[DennisF]

Hey all, I’m unsure if I’m missing something here in my styles or if this is not possible due to some limitation with the styling of drop-downs. With that said, I’d love to change the color of the “selection” in my Search Box dropdown from the blue background to another color that is more fitting to my brand. Any ideas on how to do this? I’ve attached a Screenshot.

[andrewgassen]

I’m guessing you’re going to need some custom CSS for that. Based on other threads, I bet @jarrad has the solution for this one.

[DennisF]

@andrewgassen I’m assuming the same. I’m just unsure how to create custom classes for specific items like this in the UI. I know you can manipulate the “Search Box Input” itself, but I don’t see how to modify the drop down from it. Thanks for looping @jarrad in.

[jarrad]

to change the background color, grab the plugbubble plugin and run block:

$('.dropdown-choice').css('background-color', 'red');

this will do all drop downs though, so if you want a certain one or ones assign an id to the dropdown then do this,

$('#MYID').addClass('myDD');
$('.myDD').css('background-color', 'red');

for the font change .css('background-color', 'red'); to .css('color', 'white');

colors can be plain names, RGB(0,0,0) or hex…

[jarrad]

arr, sorry i seen the pic and though you wanted dropdowns! for the search bar,

.dropdown-choice should be .tt-dropdown-menu

[DennisF]

Thanks @jarrad getting close for sure. Follow up questions… How do you “select” the css for the actual hover state of that dropdown? I can’t find the class name. Currently it’s Blue (In the screenshot). I’d like to change that to a more custom hex. Thanks!