Forms Background Color

[yeeli]

I'd like to change the background color of certain select menus. I already changed the color in the Visual Editor, but the changes don't apply to a few select menus:




Is there any way to change these?

[Brian]

Hi, yeeli.

The only way to modify these is by adding custom CSS to Themes > Advanced Styles & CSS > Style Sheet.

I personally use this to make it match the color scheme of my forum, but you're more than free to substitute the @ variables with your preferred hex colors.

/* Pagination Dropdowns */
.control-bar .controls .status,
.control-bar .controls .ui-selectMenu-box,
.control-bar .ui-search .search-input,
.ui-selectMenu-box { background-color: @container_background_color_1; color: @container_text_color_1; }
.control-bar .controls .icon > span,
.control-bar .search-filters-button,
.ui-selectMenu-box .icon .arrow { background-color: @pagination_background_color; border-left: 1px solid @container_inner_border_color; }
.options_menu li > a,
.select_menu_list li > a,
.smiley-menu li > a,
.ui-menu-context li > a
{ color: @link_color; }
.options_menu li:hover > a,
.select_menu_list li:hover > a,
.smiley-menu li:hover > a,
.ui-menu-context li:hover > a
{ color: @container_text_color_1; background-image: none; background-color: @container_highlight_color; border-color: @container_inner_border_color; }
.options_menu, .select_menu_list, .smiley-menu, .ui-menu-context,
.options_menu ul, .select_menu_list ul, .smiley-menu ul, .ui-menu-context ul
{ background-color: @container_background_color_1; border-color: @container_outer_border_color }
.options_menu li, .select_menu_list li,
.smiley-menu li, .ui-menu-context li
{ background-image: none; }
.ui-selectMenu-box:hover > .icon > .arrow { background-color: @pagination_background_color; }