KendoUI drop down list styling

Here is a sample of how to style a kendo drop down list

by Dan Shahin

HTML

<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.web.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.blueopal.min.css">
<select>
    <option>option 1</option>
    <option>option 2</option>
    <option>option 3</option>
    <option>option 4</option>
    <option>option 5</option>
</select>

CSS

.k-dropdown {
    background-color: transparent !important;
}
.k-dropdown .k-dropdown-wrap, .k-dropdown.k-state-border-down .k-dropdown-wrap.k-state-border-down {
    padding: 5px !important;
    border: 1px solid #959694 !important;
    border-radius: 20px 20px 20px 20px !important;
}
.k-dropdown .k-dropdown-wrap .k-select, .k-ie .k-dropdown .k-dropdown-wrap .k-select, .k-ff .k-dropdown .k-dropdown-wrap .k-select {
    background-color: #f6f7ef !important;
    padding: 8px !important;
    border-left: solid #959694 thin !important;
    border-right: solid #959694 thin !important;
    border-radius: 0 20px 20px 20px !important;
}
[data-role="popup"] {
    background-color: #fff !important;
    border-radius: 1px !important;
}
[data-role="popup"] ul li[class="k-item k-state-hover"], [data-role="popup"] ul li[class="k-item k-state-selected k-state-focused"] {
    border-radius: 0px;
}

JavaScript

$('select').kendoDropDownList();