Home >Web Front-end >JS Tutorial >Based on jquery, use dl simulation to implement customizable style SELECT drop-down list (encapsulated)_jquery

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

WBOYOriginal: 2016-05-16 18:17:03997browse

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,鍓嶇">

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Use text links to replace form submission buttons_Form special effectsNext article：Use text links to replace form submission buttons_Form special effects

See more

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

Related articles