Based on jquery, use dl simulation to implement customizable style SELECT drop-down list (encapsulated)

Based on jquery, use dl simulation to implement customizable style SELECT drop-down list (encapsulated)_jquery

WBOY

Release： 2016-05-16 18:17:03

Original

983 people have browsed it

I won’t go into the specific idea, it’s more general, and there are comments in the code. The usage method is also self-explanatory, it is a simple global function encapsulation. If you don’t understand, check the comments in the source code or Google.
In addition, for those who are interested , you can try to change an input drop-down list based on this plug-in. The idea is similar, ha.

Demo and code: Demo code Code download
Run code:

.selectitem{position:absolute;top:140px;left:50%;margin-left:-120px;overflow:hidden;width:180px;height:30px;background:#dff0f0;font-size:14px;line-height:30px;filter:alpha(opacity:80);opacity:0.8;cursor:pointer;z-index:999} 
.selectitem dt,.selectitem dd{padding-left:28px;background:transparent url(http://mrthink.net/demo/images/20101031sprite.png) 30px 0 no-repeat} 
.selectitem dt.drop{background-position:0 -30px;} 
.selectitem dt.shrink{background-position:0 0} 
.selectitem dd.hover{background-color:#b6e2e2}

.selectitem dl .tag_news{background-position:0 -60px;color:#bd0000} 
.selectitem dl .tag_it{background-position:0 -90px;color:#0759E0} 
.selectitem dl .tag_reading{background-position:0 -120px;color:#409513} 
.selectitem dl .tag_interests{background-position:0 -150px;color:#EE7D0E} 
.selectitem dl .tag_career{background-position:0 -180px;color:#000382} 
.selectitem dl .tag_living{background-position:0 -210px;color:#733900} 
.selectitem dl .tag_sports{background-position:0 -240px;color:#9B018B}

</style>
<meta name="author" content="Mr.Think闈掗笩">
<meta name="keywords" content="Mr.Think,鍓嶇">