How to change the background color of the selected area in the drop-down list

Description

What MCU/Processor/Board and compiler are you using?

VS code

What LVGL version are you using?

v8.0

What do you want to achieve?

I want to change the background color of the selected area in the drop-down list

What have you tried so far?

94912C57-D486-4bc6-BE04-8DB82ABC1350

static void add_dd_list_style(lv_event_t *e)
{
    lv_event_code_t code = lv_event_get_code(e);
    lv_obj_t * dd = lv_event_get_user_data(e);
    if(code == LV_EVENT_CLICKED) {
        lv_obj_t * list = lv_dropdown_get_list(dd);
        LV_LOG_USER("xpppppppppppppppppppppppppppxxxxxxxx"); 
        if(list != NULL) {
            LV_LOG_USER("xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"); 
            lv_obj_set_style_radius(list, 4, LV_PART_MAIN|LV_STATE_DEFAULT);
            lv_obj_set_style_border_width(list,0, LV_PART_MAIN|LV_STATE_DEFAULT);
            lv_obj_set_style_border_width(list,1, LV_PART_SCROLLBAR |LV_STATE_DEFAULT);
            lv_obj_set_style_bg_color(list,lv_palette_main(LV_PALETTE_GREY), LV_PART_MAIN|LV_STATE_DEFAULT);
            lv_obj_set_style_bg_color(list,lv_color_white(), LV_PART_SELECTED|LV_STATE_DEFAULT);
            // lv_obj_set_style_bg_color(list,lv_palette_main(LV_PALETTE_RED), LV_PART_SELECTED);
            // lv_obj_set_style_bg_color(list,lv_palette_main(LV_PALETTE_RED), LV_PART_MAIN|0x1);
            // lv_obj_set_style_bg_color(list,lv_palette_main(LV_PALETTE_RED), LV_PART_MAIN|LV_STATE_DEFAULT);
            // lv_obj_set_style_bg_color(list,lv_palette_main(LV_PALETTE_RED), LV_PART_SCROLLBAR|LV_STATE_DEFAULT);
            
            
            lv_obj_set_style_text_font(list, &lv_font_montserrat_12, LV_PART_MAIN|LV_STATE_DEFAULT);
            lv_obj_set_style_text_font(list, &lv_font_montserrat_12, LV_PART_SELECTED|LV_STATE_DEFAULT);
            lv_obj_set_style_text_font(list, &lv_font_montserrat_12, LV_PART_SELECTED|LV_STATE_PRESSED);
            lv_obj_set_style_pad_top(list, 8, LV_PART_MAIN|LV_STATE_DEFAULT);
            lv_obj_set_style_pad_bottom(list, 8, LV_PART_MAIN|LV_STATE_DEFAULT); 
            lv_obj_set_style_text_color(list,lv_palette_main(LV_PALETTE_RED), LV_PART_SELECTED|LV_STATE_FOCUSED);           
            lv_obj_set_style_text_color(list,lv_color_white(), LV_PART_MAIN|LV_STATE_DEFAULT);           
        }
    }
}

The background color pointed by the arrow has not changed. What should I do to change it?

Screenshot and/or video

If possible, add screenshots and/or videos about the current state.

I asked the same question.

See the answer here:

Regards

1 Like

Awesome!!!
It’s very helpful for me,
Thank you so much!