Custom Dropdown of Currency Selector instead of Default select box

Sometimes we need custom dropdown for currency selector at the top of the page so that we can give custom styles to it. Using default select box normally it is not possible. Many times i faced this issue then i thought to make it custom and publish for all. My realization is all of we sometimes face this problem. So here is my solution. Just replace "Presentation/Nop.Web/views/Common/CurrencySelector.cshtml" file using my code.

@*Supported Version: 3.90, 3.80*@

@model CurrencySelectorModel
@using Nop.Web.Models.Common;
@using Nop.Core;
@using Nop.Core.Infrastructure;
@if (Model.AvailableCurrencies.Count > 1)
{
    
        
        var webHelper = EngineContext.Current.Resolve<IWebHelper>();
    
        var currencies = Model.AvailableCurrencies.Select(x => new SelectListItem
            {
                Text = x.Name,
                Value = webHelper.ModifyQueryString(Url.RouteUrl("ChangeCurrency", new { customercurrency = x.Id }), "returnurl=" + HttpUtility.UrlEncode(HttpContext.Current.Request.RawUrl), null),
                Selected = x.Id.Equals(Model.CurrentCurrencyId)
            });
        var selectedCurrency = Model.AvailableCurrencies.FirstOrDefault(x => x.Id == Model.CurrentCurrencyId).Name;
            <div class="currency-selector">            
                <div class="currency-dropdown text-right">
                    <div class="dropdown-label hidden-sm hidden-xs">Currency:</div>

                    <a id="currency-dropdown-toggle" class="dropdown-toggle" data-expanded="false">
                        @selectedCurrency
                    </a>

                    <ul class="currency-dropdown-menu">  
                        @{
                            if (currencies.Count() > 0)
                            {
                                foreach (var currency in currencies)
                        {
                            var className = currency.Selected ? "active" : "";
                            <li class="@className" >
                                <a href="@currency.Value">
                                    @currency.Text                        
                                </a>
                            </li>
                        }  
                            }
                        }
                    </ul>

                    </div>
            </div>
      
}

<style type="text/css">
    .currency-selector .currency-dropdown {
        z-index: 10011;
        width: 100%;
    }
    .dropdown-label {
        display: inline-block;
        padding: 0 10px 0 0;
    }

    .currency-dropdown > a {
        text-decoration: none;
        display: inline-block;
    }

    .currency-dropdown {
        position: relative;
    }
        .text-right {
    text-align: right;
}
    .currency-dropdown-menu > li > a {
        display: block;
        padding: 3px 20px;
        clear: both;
        font-weight: normal;
        line-height: 1.6875;
        color: #333333;
        white-space: nowrap;
    }

    @@media (min-width: 1025px) {
        .settings .dropdown.text-right {
            padding: 0 0 10px 28px;
        }

        .currency-dropdown {
            display: inline;
            padding: 0 20px 10px 0;
            font-weight: 300;
        }

        ul.currency-dropdown-menu li:hover > a {
            color: #333333;
            background-color: #f7f7f7;
        }

        .currency-dropdown .currency-dropdown-menu > li > a {
            display: block;
            color: #777777;
            font-size: 1em;
            line-height: 1em;
            padding: 12px 7px 13px;
            text-decoration: none;
            border-bottom: 1px solid #e5e5e5;
            font-weight: 300;
        }
    }

    .currency-dropdown-menu {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 1000;
        display: none;
        float: left;
        min-width: 160px;
        padding: 5px 0;
        margin: 2px 0 0;
        list-style: none;
        font-size: 16px;
        text-align: left;
        background-color: #fff;
        border: 1px solid #ccc;
        border: 1px solid rgba(0, 0, 0, 0.15);
        border-radius: 4px;
        -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
        background-clip: padding-box;
    }

    .dropdown-toggle:hover {
        color: #000;
    }

    .currency-dropdown.text-right .currency-dropdown-menu {
        left: auto;
        right: 0;
    }

    .dropdown-toggle::after {
        display: inline-block;
        content: "";
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 5px solid #000;
    }
    .open > .currency-dropdown-menu {
        display: block;
    }

    .currency-dropdown-menu li:last-child a {
        border-bottom: 0px;
    }
</style>

<script type="text/javascript">
    $(document).ready(function () {
        $(".dropdown-toggle").click(function () {

            if ($(this).attr("data-expanded") == "false") {
                $(".currency-dropdown").addClass("open");
                $(this).attr("data-expanded", "true");
            }
            else {
                $(".currency-dropdown").removeClass("open");
                $(this).attr("data-expanded", "false")
            }
            
        });

        // hides dropdown when it is open and you click outside of it
        $('html').click(function (e) {
            if (e.target.id != 'currency-dropdown-toggle') {                
                $(".currency-dropdown").removeClass("open");
                $(".dropdown-toggle").attr("data-expanded", "false")
            }
        });
    });
</script>

Good Job!!

Thanks Sohel

For better understanding the view of custom currency dropdown i have attached two images link below:

http://prnt.sc/ezwk1g

http://prnt.sc/ezwl97