I need to change the color of dropdown from white to transparent, I tried background-color but its not working

Hi Narendra,

which platform you are using Web/Mobile?

Can you please explain more so that we can help you. screenshot etc.


Regards,

Pankaj


I am using mobile platform

Hello Narendra,

this is the class which is used for the background color's of mobile dropdown.u can edit the background color attribute or overwrite the existing attribute.

SyntaxEditor Code Snippet

[data-dropdown] .scrollable-list-with-scroll {
    position: relative;
    background: #FFF no-repeat;;
    background-image: -webkit-radial-gradient(50% 0, farthest-side, rgba(0,0,0,0.2), rgba(0,0,0,0)), -webkit-radial-gradient(50% 100%,farthest-side, rgba(0,0,0,0.2), rgba(0,0,0,0));
    background-image: -moz-radial-gradient(50% 0, farthest-side, rgba(0,0,0,0.2), rgba(0,0,0,0)), -moz-radial-gradient(50% 100%,farthest-side, rgba(0,0,0,0.2), rgba(0,0,0,0));
    background-image: radial-gradient(farthest-side at 50% 0, rgba(0,0,0,0.2), rgba(0,0,0,0)), radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,0.2), rgba(0,0,0,0));
    background-position: 0 0, 0 100%;
    background-size: 100% 14px;
}


Regards,

Pankaj

How to override existing attribute 

Solution

I did it

SyntaxEditor Code Snippet

[data-dropdown] > div.dropdown-display {
    background-color: transparent;
    padding: 14px 10px;
    border-style: solid;
    border-width: 1px;
    border-color: #fff;
    border-radius: 0px;
}
Solution

Hi, You need to put this CSS in your page level in order to change the dropdown color.


SyntaxEditor Code Snippet

[data-dropdown] .scrollable-list-with-scroll {
    position: relative;
    background: #2381e3;/*your custom color*/
    background-image: none;
    background-image: none;
    background-image: none;
    background-image: none;
    background-position: 0 0, 0 100%;
    background-size: 100% 14px;
}


.dropdown-expanded-down div.dropdown-list {
    border-radius: 0 0 2px 2px;
    /* overflow: hidden; */
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.2);
}
[data-dropdown] .scrollable-list-with-scroll:before, [data-dropdown] .scrollable-list-with-scroll:after {
    content: "";
    position: relative;
    z-index: -1;
    display: block;
    height: 30px;
    margin: 0 0 -30px;
    background: none;
    background: none;
    background: none;
}

[data-dropdown] .scrollable-list-with-scroll:after {
    margin: -30px 0 0;
    background: none;
    background: none;
    background: none;
}

Regards,

Pankaj



Hi Pankaj,

This was very helpful and handy. Thank you very much for sharing. 

Do you know what CSS standards outsystems use? Can I know any reference for CSS styling in Outsystems.

Any information is much appreciated.


Thanks,

Dhavan