Hi nedash,
Please refer below sample.
CSS
@font-face {
font-family: 'Mj_Dinar Two Light'; /*تعریف یک نام برای فونت*/
src: url('../fonts/Mj_Dinar Two Light.eot'); /*اکسپلورر 9 به بعد*/
src: local('Mj_Dinar Two Light'), /*بررسی نصب بودن فونت در سیستم کاربر*/
local('Mj_Dinar Two Light'), /*برای برخی از مرورگرها مانند سافاری*/
url('../fonts/Mj_Dinar Two Light.eot?#iefix') format('embedded-opentype'), /*هک برای اکسپلورر 8 و ماقبل*/
url('../fonts/Mj_Dinar Two Light.woff') format('woff'), /*مرورگر های جدید*/
url('../fonts/Mj_Dinar Two Light.ttf') format('truetype'), /*تمام مرورگرها به جزء اکسپلورر*/
url('../fonts/Mj_Dinar Two Light.svg#Mj_Dinar Two Light') format('svg'); /*نسخه های قدیمی سیستم عامل iOS*/
font-style: normal;
font-weight: normal;
}
@font-face {
font-family: 'IRANSans-Medium-web'; /*تعریف یک نام برای فونت*/
src: url('../fonts/IRANSans-Medium-web.eot'); /*اکسپلورر 9 به بعد*/
src: local('IRANSans-Medium-web'), /*بررسی نصب بودن فونت در سیستم کاربر*/
local('IRANSans-Medium-web'), /*برای برخی از مرورگرها مانند سافاری*/
url('../fonts/IRANSans-Medium-web.eot?#iefix') format('embedded-opentype'), /*هک برای اکسپلورر 8 و ماقبل*/
url('../fonts/IRANSans-Medium-web.woff') format('woff'), /*مرورگر های جدید*/
url('../fonts/IRANSans-Medium-web.ttf') format('truetype'), /*تمام مرورگرها به جزء اکسپلورر*/
url('../fonts/IRANSans-Medium-web.svg#IRANSans-Medium-web') format('svg'); /*نسخه های قدیمی سیستم عامل iOS*/
font-style: normal;
font-weight: normal;
}
.selectric-wrapper {
position: relative;
cursor: pointer;
direction: rtl;
}
.selectric-responsive {
width: 100%;
direction: rtl;
}
.selectric {
border-radius: 0px;
background: #1B1B1B;
position: relative;
border: 1px solid #D40000; /*رنگ ddl*/
direction: rtl;
height: 38px;
}
.selectric .label {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin: 0 28px 0 10px;
font-size: 16px;
line-height: 28px;
color: white; /*رنگ فونت خود dropdown*/
height: 28px; /*طول dropdown*/
text-align: right;
direction: rtl;
font-family: IRANSans-Medium-web;
padding-top: 5px; /*تنظیم فاصله "همه" از بالا*/
padding-right: 5px;
}
.selectric .button {
display: block;
position: absolute;
right: 0;
top: 0;
width: 22px;
height: 36px; /*تعیین طول فلش*/
/*color:red;*/
text-align: center;
font: 0/0 a;
*font: 20px/38px Lucida Sans Unicode, Arial Unicode MS, Arial;
border: 1px solid #6d6b5c;
direction: rtl;
background: #2c2a1e; /*تعیین رنگ پشت فلش*/
}
.selectric .button:after {
content: " ";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 0;
height: 0;
border: 4px solid transparent;
border-top-color: #6d6b5c; /**********تعیین رنگ فلش**/
border-bottom: none;
direction: rtl;
}
.selectric-hover .selectric {
background: #2c2a1e;
direction: rtl;
}
.selectric-hover .selectric .button {
color: #e6e6e6;
}
/**رنگ فلش وقتی با موس روی آن میرویم**/
.selectric-hover .selectric .button:after {
border-top-color: #c8ba61;
}
.selectric-open {
z-index: 9999;
}
.selectric-open .selectric-items {
display: block;
}
.selectric-disabled {
filter: alpha(opacity=50);
opacity: 0.5;
cursor: default;
user-select: none;
}
.selectric-hide-select {
position: relative;
overflow: hidden;
width: 0;
height: 0;
}
.selectric-hide-select select {
position: absolute;
left: -100%;
display: none;
direction: rtl;
}
.selectric-input {
position: absolute !important;
top: 0 !important;
left: 0 !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
margin: 0 !important;
padding: 0 !important;
width: 1px !important;
height: 1px !important;
outline: none !important;
border: none !important;
*font: 0/0 a !important;
background: none !important;
direction: rtl;
}
.selectric-temp-show {
position: absolute !important;
visibility: hidden !important;
display: block !important;
direction: rtl;
}
/* Items box */
.selectric-items {
display: none;
position: absolute;
top: 100%;
left: 0;
font-family: IRANSans-Medium-web;
background: #1b1b1b; /*رنگ پشت زمینه آیتم ها*/
border: 1px solid #d40000; /**کادر دور موارد dropdown**/
z-index: -1;
box-shadow: 0 0 10px -6px;
text-align: right;
direction: rtl;
}
.selectric-items .selectric-scroll {
height: 100%;
overflow: auto;
direction: ltr;
}
.selectric-above .selectric-items {
top: auto;
bottom: 100%;
direction: rtl;
}
.selectric-items ul, .selectric-items li {
list-style: none;
padding: 0;
margin: 0;
font-size: 14px;
line-height: 20px; /*طول کادر آیتم*/
min-height: 20px;
direction: rtl;
}
.selectric-items li {
display: block;
padding: 8px;
/*border-top: 1px solid orange;
border-bottom: 1px solid orange;*/ /*رنگ بردر بالا و پایین بردرها*/
color: white; /*رنگ فونت*/
cursor: pointer;
direction: rtl;
/*background:red;*/
}
.selectric-items li.selected {
background: #550300; /*رنگ آیتم انتخاب شده*/
color: #d4cd6d; /*رنگ فونت آیتم انتخابی*/
}
.selectric-items li:hover {
background: #3a3a3a;
color: white;
direction: rtl;
}
.selectric-items .disabled {
filter: alpha(opacity=50);
opacity: 0.5;
cursor: default !important;
background: none !important;
color: #666 !important;
user-select: none;
direction: rtl;
}
.selectric-items .selectric-group .selectric-group-label {
font-weight: bold;
padding-left: 10px;
cursor: default;
user-select: none;
background: none;
color: #444;
direction: rtl;
}
.selectric-items .selectric-group.disabled li {
filter: alpha(opacity=100);
opacity: 1;
direction: rtl;
}
.selectric-items .selectric-group li {
padding-left: 25px;
direction: rtl;
}
.selectric {
border-radius: 0px;
background: #1B1B1B;
position: relative;
border: 1px solid #D40000; /*رنگ ddl*/
direction: rtl;
height: 38px;
}
HTML
<link href="Selectric.css" rel="stylesheet" />
<style type="text/css">
.Dlnama {
border: 1px solid red !important;
background: none;
}
.Dlkaf {
border: 1px solid blue !important;
background: none;
}
</style>
<div id="JkafL">
<asp:DropDownList ID="Ddlnama" runat="server" CssClass="selectric Dlnama">
<asp:ListItem>--Select--</asp:ListItem>
<asp:ListItem>Aspsnippets</asp:ListItem>
<asp:ListItem>Aspforums</asp:ListItem>
</asp:DropDownList>
</div>
<hr />
<div id="JkafR">
<asp:DropDownList ID="Ddlkaf" runat="server" CssClass="selectric Dlkaf">
<asp:ListItem>--Select--</asp:ListItem>
<asp:ListItem>Aspsnippets</asp:ListItem>
<asp:ListItem>Aspforums</asp:ListItem>
</asp:DropDownList>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
!function (e) {
"function" == typeof define && define.amd ? define(["jquery"], e) : "object" == typeof module && module.exports ? module.exports = function (t, s) {
return void 0 === s && (s = "undefined" != typeof window ? require("jquery") : require("jquery")(t)), e(s), s
}
: e(jQuery)
}
(function (e) {
"use strict";
var t = e(document), s = e(window), i = "selectric", l = ".sl", n = ["a", "e", "i", "o", "u", "n", "c", "y"], o = [/[\xE0-\xE5]/g, /[\xE8-\xEB]/g, /[\xEC-\xEF]/g, /[\xF2-\xF6]/g, /[\xF9-\xFC]/g, /[\xF1]/g, /[\xE7]/g, /[\xFD-\xFF]/g], a = function (t, s) {
var i = this;
i.element = t, i.$element = e(t), i.state = {
enabled: !1, opened: !1, currValue: -1, selectedIdx: -1
}
, i.eventTriggers = {
open: i.open, close: i.close, destroy: i.destroy, refresh: i.refresh, init: i.init
}
, i.init(s)
}
;
a.prototype = {
utils: {
isMobile: function () {
return /android|ip(hone|od|ad)/i.test(navigator.userAgent)
}
, escapeRegExp: function (e) {
return e.replace(/[.*+?^${
}
() | [\]\\]/ g, "\\$&")
}
, replaceDiacritics: function (e) {
for (var t = o.length;
t--;
) e = e.toLowerCase().replace(o[t], n[t]);
return e
}
, format: function (e) {
var t = arguments;
return ("" + e).replace(/\{
(?: (\d +) | (\w +)) \
}
/g, function (e, s, i) {
return i && t[1] ? t[1][i] : t[s]
}
)
}
, nextEnabledItem: function (e, t) {
for (;
e[t = (t + 1) % e.length].disabled;
);
return t
}
, previousEnabledItem: function (e, t) {
for (;
e[t = (t > 0 ? t : e.length) - 1].disabled;
);
return t
}
, toDash: function (e) {
return e.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase()
}
, triggerCallback: function (t, s) {
var l = s.element, n = s.options["on" + t];
e.isFunction(n) && n.call(l, l, s), e.fn[i].hooks[t] && e.each(e.fn[i].hooks[t], function () {
this.call(l, l, s)
}
), e(l).trigger(i + "-" + this.toDash(t), s)
}
}
, init: function (t) {
var s = this;
if (s.options = e.extend(!0, {
}
, e.fn[i].defaults, s.options, t), s.utils.triggerCallback("BeforeInit", s), s.destroy(!0), s.options.disableOnMobile && s.utils.isMobile()) s.disableOnMobile = !0;
else {
s.classes = s.getClassNames();
var l = e("<input/>", {
class: s.classes.input, readonly: s.utils.isMobile()
}
), n = e("<div/>", {
class: s.classes.items, tabindex: -1
}
), o = e("<div/>", {
class: s.classes.scroll
}
), a = e("<div/>", {
class: s.classes.prefix, html: s.options.arrowButtonMarkup
}
), r = e("<span/>", {
class: "label"
}
), p = s.$element.wrap("<div/>").parent().append(a.prepend(r), n, l);
s.elements = {
input: l, items: n, itemsScroll: o, wrapper: a, label: r, outerWrapper: p
}
, s.$element.on(s.eventTriggers).wrap('<div class="' + s.classes.hideselect + '"/>'), s.originalTabindex = s.$element.prop("tabindex"), s.$element.prop("tabindex", !1), s.populate(), s.activate(), s.utils.triggerCallback("Init", s)
}
}
, activate: function () {
var e = this, t = e.$element.width();
e.utils.triggerCallback("BeforeActivate", e), e.elements.outerWrapper.prop("class", [e.classes.wrapper, e.$element.prop("class").replace(/\S+/g, e.classes.prefix + "-$&"), e.options.responsive ? e.classes.responsive : ""].join(" ")), e.options.inheritOriginalWidth && t > 0 && e.elements.outerWrapper.width(t), e.$element.prop("disabled") ? (e.elements.outerWrapper.addClass(e.classes.disabled), e.elements.input.prop("disabled", !0)) : (e.state.enabled = !0, e.elements.outerWrapper.removeClass(e.classes.disabled), e.$li = e.elements.items.removeAttr("style").find("li"), e.bindEvents()), e.utils.triggerCallback("Activate", e)
}
, getClassNames: function () {
var t = this, s = t.options.customClass, i = {
}
;
return e.each("Input Items Open Disabled TempShow HideSelect Wrapper Focus Hover Responsive Above Scroll Group GroupLabel".split(" "), function (e, l) {
var n = s.prefix + l;
i[l.toLowerCase()] = s.camelCase ? n : t.utils.toDash(n)
}
), i.prefix = s.prefix, i
}
, setLabel: function () {
var t = this, s = t.options.labelBuilder, i = t.lookupItems[t.state.currValue];
t.elements.label.html(e.isFunction(s) ? s(i) : t.utils.format(s, i))
}
, populate: function () {
var t = this, s = t.$element.children(), i = t.$element.find("option"), l = i.index(i.filter(":selected")), n = 0;
t.state.currValue = t.state.selected = ~l ? l : 0, t.state.selectedIdx = t.state.currValue, t.items = [], t.lookupItems = [], s.length && (s.each(function (s) {
var i = e(this);
if (i.is("optgroup")) {
var l = {
element: i, label: i.prop("label"), groupDisabled: i.prop("disabled"), items: []
}
;
i.children().each(function (s) {
var i = e(this), o = i.html();
l.items[s] = {
index: n, element: i, value: i.val(), text: o, slug: t.utils.replaceDiacritics(o), disabled: l.groupDisabled
}
, t.lookupItems[n] = l.items[s], n++
}
), t.items[s] = l
}
else {
var o = i.html();
t.items[s] = {
index: n, element: i, value: i.val(), text: o, slug: t.utils.replaceDiacritics(o), disabled: i.prop("disabled")
}
, t.lookupItems[n] = t.items[s], n++
}
}
), t.setLabel(), t.elements.items.append(t.elements.itemsScroll.html(t.getItemsMarkup(t.items))))
}
, getItemsMarkup: function (t) {
var s = this, i = "<ul>";
return e.each(t, function (t, l) {
void 0 !== l.label ? (i += s.utils.format('<ul class="{
1
}
"><li class="{
2
}
">{
3
}
</li > ', e.trim([s.classes.group, l.groupDisabled ? "disabled" : "", l.element.prop("class")].join(" ")), s.classes.grouplabel, l.element.prop("label")), e.each(l.items, function (e, t) {
i += s.getItemMarkup(t.index, t)
}
), i += "</ul>") : i += s.getItemMarkup(l.index, l)
}
), i + "</ul>"
}
, getItemMarkup: function (t, s) {
var i = this, l = i.options.optionsItemBuilder;
return i.utils.format('<li data-index="{
1
}
" class="{
2
}
">{
3
}
</li > ', t, e.trim([t === i.state.currValue ? "selected" : "", t === i.items.length - 1 ? "last" : "", s.disabled ? "disabled" : ""].join(" ")), e.isFunction(l) ? l(s, s.element, t) : i.utils.format(l, s))
}
, bindEvents: function () {
var t = this;
t.elements.wrapper.add(t.$element).add(t.elements.outerWrapper).add(t.elements.input).off(l), t.elements.outerWrapper.on("mouseenter.sl mouseleave" + l, function (s) {
e(this).toggleClass(t.classes.hover, "mouseenter" === s.type), t.options.openOnHover && (clearTimeout(t.closeTimer), "mouseleave" === s.type ? t.closeTimer = setTimeout(e.proxy(t.close, t), t.options.hoverIntentTimeout) : t.open())
}
), t.elements.wrapper.on("click" + l, function (e) {
t.state.opened ? t.close() : t.open(e)
}
), t.elements.input.prop({
tabindex: t.originalTabindex, disabled: !1
}
).on("keydown" + l, e.proxy(t.handleKeys, t)).on("focusin" + l, function (e) {
t.elements.outerWrapper.addClass(t.classes.focus), t.elements.input.one("blur", function () {
t.elements.input.blur()
}
), t.options.openOnFocus && !t.state.opened && t.open(e)
}
).on("focusout" + l, function () {
t.elements.outerWrapper.removeClass(t.classes.focus)
}
).on("input propertychange", function () {
var s = t.elements.input.val();
clearTimeout(t.resetStr), t.resetStr = setTimeout(function () {
t.elements.input.val("")
}
, t.options.keySearchTimeout), s.length && e.each(t.items, function (e, i) {
if (RegExp("^" + t.utils.escapeRegExp(s), "i").test(i.slug) && !i.disabled) return t.select(e), !1
}
)
}
), t.$li.on({
mousedown: function (e) {
e.preventDefault(), e.stopPropagation()
}
, click: function () {
return t.select(e(this).data("index"), !0), !1
}
}
)
}
, handleKeys: function (t) {
var s = this, i = t.keyCode || t.which, l = s.options.keys, n = e.inArray(i, l.previous) > -1, o = e.inArray(i, l.next) > -1, a = e.inArray(i, l.select) > -1, r = e.inArray(i, l.open) > -1, p = s.state.selectedIdx, u = n && 0 === p || o && p + 1 === s.items.length, c = 0;
if (13 !== i && 32 !== i || t.preventDefault(), n || o) {
if (!s.options.allowWrap && u) return;
n && (c = s.utils.previousEnabledItem(s.items, p)), o && (c = s.utils.nextEnabledItem(s.items, p)), s.select(c)
}
return a && s.state.opened ? void s.select(p, !0) : void (r && !s.state.opened && s.open())
}
, refresh: function () {
var e = this;
e.populate(), e.activate(), e.utils.triggerCallback("Refresh", e)
}
, setOptionsDimensions: function () {
var e = this, t = e.elements.items.closest(":visible").children(":hidden").addClass(e.classes.tempshow), s = e.options.maxHeight, i = e.elements.items.outerWidth(), l = e.elements.wrapper.outerWidth() - (i - e.elements.items.width());
!e.options.expandToItemText || l > i ? e.finalWidth = l : (e.elements.items.css("overflow", "scroll"), e.elements.outerWrapper.width(9e4), e.finalWidth = e.elements.items.width(), e.elements.items.css("overflow", ""), e.elements.outerWrapper.width("")), e.elements.items.width(e.finalWidth).height() > s && e.elements.items.height(s), t.removeClass(e.classes.tempshow)
}
, isInViewport: function () {
var e = this, t = s.scrollTop(), i = s.height(), l = e.elements.outerWrapper.offset().top, n = l + e.elements.outerWrapper.outerHeight() + e.itemsHeight <= t + i, o = l - e.itemsHeight > t, a = !n && o;
e.elements.outerWrapper.toggleClass(e.classes.above, a)
}
, detectItemVisibility: function (e) {
var t = this, s = t.$li.eq(e).outerHeight(), i = t.$li[e].offsetTop, l = t.elements.itemsScroll.scrollTop(), n = i + 2 * s;
t.elements.itemsScroll.scrollTop(n > l + t.itemsHeight ? n - t.itemsHeight : i - s < l ? i - s : l)
}
, open: function (s) {
var n = this;
n.utils.triggerCallback("BeforeOpen", n), s && (s.preventDefault(), s.stopPropagation()), n.state.enabled && (n.setOptionsDimensions(), e("." + n.classes.hideselect, "." + n.classes.open).children()[i]("close"), n.state.opened = !0, n.itemsHeight = n.elements.items.outerHeight(), n.itemsInnerHeight = n.elements.items.height(), n.elements.outerWrapper.addClass(n.classes.open), n.elements.input.val(""), s && "focusin" !== s.type && n.elements.input.focus(), t.on("click" + l, e.proxy(n.close, n)).on("scroll" + l, e.proxy(n.isInViewport, n)), n.isInViewport(), n.options.preventWindowScroll && t.on("mousewheel.sl DOMMouseScroll" + l, "." + n.classes.scroll, function (t) {
var s = t.originalEvent, i = e(this).scrollTop(), l = 0;
"detail" in s && (l = -1 * s.detail), "wheelDelta" in s && (l = s.wheelDelta), "wheelDeltaY" in s && (l = s.wheelDeltaY), "deltaY" in s && (l = -1 * s.deltaY), (i === this.scrollHeight - n.itemsInnerHeight && l < 0 || 0 === i && l > 0) && t.preventDefault()
}
), n.detectItemVisibility(n.state.selectedIdx), n.utils.triggerCallback("Open", n))
}
, close: function () {
var e = this;
e.utils.triggerCallback("BeforeClose", e), e.change(), t.off(l), e.elements.outerWrapper.removeClass(e.classes.open), e.state.opened = !1, e.utils.triggerCallback("Close", e)
}
, change: function () {
var e = this;
e.utils.triggerCallback("BeforeChange", e), e.state.currValue !== e.state.selectedIdx && (e.$element.prop("selectedIndex", e.state.currValue = e.state.selectedIdx).data("value", e.lookupItems[e.state.selectedIdx].text), e.setLabel()), e.utils.triggerCallback("Change", e)
}
, select: function (e, t) {
var s = this;
void 0 !== e && (s.lookupItems[e].disabled || (s.$li.filter("[data-index]").removeClass("selected").eq(s.state.selectedIdx = e).addClass("selected"), s.detectItemVisibility(e), t && s.close()))
}
, destroy: function (e) {
var t = this;
t.state && t.state.enabled && (t.elements.items.add(t.elements.wrapper).add(t.elements.input).remove(), e || t.$element.removeData(i).removeData("value"), t.$element.prop("tabindex", t.originalTabindex).off(l).off(t.eventTriggers).unwrap().unwrap(), t.state.enabled = !1)
}
}
, e.fn[i] = function (t) {
return this.each(function () {
var s = e.data(this, i);
s && !s.disableOnMobile ? "string" == typeof t && s[t] ? s[t]() : s.init(t) : e.data(this, i, new a(this, t))
}
)
}
, e.fn[i].hooks = {
add: function (e, t, s) {
this[e] || (this[e] = {
}
), this[e][t] = s
}
, remove: function (e, t) {
delete this[e][t]
}
}
, e.fn[i].defaults = {
onChange: function (t) {
e(t).change()
}
, maxHeight: 300, keySearchTimeout: 500, arrowButtonMarkup: '<b class="button">▾
</b> ', disableOnMobile: !0, openOnFocus: !0, openOnHover: !1, hoverIntentTimeout: 500, expandToItemText: !1, responsive: !1, preventWindowScroll: !0, inheritOriginalWidth: !1, allowWrap: !0, optionsItemBuilder: "{
text
}
", labelBuilder: "{
text
}
", keys: {
previous: [37, 38], next: [39, 40], select: [9, 13, 27], open: [13, 32, 37, 38, 39, 40], close: [9, 27]
}
, customClass: {
prefix: i, camelCase: !1
}
}
}
);
</script>
Screenshot
