change the dropdown arrow color in service portal

manibaig
Mega Guru

Trying to change the drop-down arrow color, i cloned the widget and tried couple of things in CSS but no luck. Appreciate your help! Can you identify the right class? Thanks

.m-l-sm {
background-image:
linear-gradient(45deg, transparent 50%, blue 50%),
linear-gradient(135deg, blue 50%, transparent 50%),
linear-gradient(to right, skyblue, skyblue);
background-position:
calc(100% - 20px) calc(1em + 2px),
calc(100% - 15px) calc(1em + 2px),
100% 0;
background-size:
5px 5px,
5px 5px,
2.5em 2.5em;
background-repeat: no-repeat;
}

find_real_file.png

1 ACCEPTED SOLUTION

Alok Kumar2
Tera Expert

Hi,

 

You can make changes to the below class:

 .select2-arrow{
background-color: beige!important;  // This is to change the background color 
}
.select2-container .select2-choice .select2-arrow b {
    display: block;
    width: 100%;
    height: 100%;
    //background: none!important; 
  background: url('bullet.png') no-repeat 4px 6px !important;  //insert your image with the required color in the images table and then refernece that image here.
}

Refer the image for the output with the above css.

find_real_file.png

 

Note: Please mark it correct or helpful if it works!!

View solution in original post

4 REPLIES 4

Allen Andreas
Administrator
Administrator

Hi,

The class, at least in my PDI, is: select2-drop-mask


Please consider marking my reply as Helpful and/or Accept Solution, if applicable. Thanks!

Didn't work 😞

Alok Kumar2
Tera Expert

Hi,

 

You can make changes to the below class:

 .select2-arrow{
background-color: beige!important;  // This is to change the background color 
}
.select2-container .select2-choice .select2-arrow b {
    display: block;
    width: 100%;
    height: 100%;
    //background: none!important; 
  background: url('bullet.png') no-repeat 4px 6px !important;  //insert your image with the required color in the images table and then refernece that image here.
}

Refer the image for the output with the above css.

find_real_file.png

 

Note: Please mark it correct or helpful if it works!!

Thanks Alok