Change color ofr DropDown

Change color ofr DropDown

  

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