There are various beautifications of the select selection box online, and I have found a lot, but there is no good style effect. So I found an effect similar to the select selection box made using ul li. I won’t talk nonsense. I will first add the picture, and the effect is as follows:
Click on a test and the list will be displayed. Click again, hide the list, select a li, and replace the content in the span with the content of li, and you can use js to monitor the changes in the span and then execute your code. The effects are as follows:
The html code is as follows:
<div id="type"> <span>Investment types</span> <ul> <li>Futures</li> <li>Stocks</li> <li>Options</li> </ul></div><div id="kind"> <span>Investment types</span> <ul> <li>Trends</li> <li>Volatility</li> <li>Arbitrage</li> <li>Stock selection</li> <li>Timing</li> </ul></div>
The css code is as follows:
ul li{ list-style: none;}.test { position: relative; float: left; width: 120px; height: 40px; padding-left: 11px; font-size: 15px; line-height: 40px; cursor: pointer; border: 1px solid #d2d2d2; border-radius: 3px; margin-right: 20px; outline: none;}.test: before { position: absolute; right: 13px; top: 18px; width: 0; height: 0; content: border-width: 8px 8px 0 8px; border-style: solid; border-color: #d36969 transparent; -webkit-transition: transform .25s; -moz-transition: transform .25s; -ms-transition: transform .25s; -o-transition: transform .25s; -o-transition: transform .25s; transition: transform .25s;}.test: after { position: absolute; right: 15px; top: 18px; width: 0; height: 0; content: ""; border-width: 6px 6px 0 6px; border-style: solid; border-color: #fff transparent; -webkit-transition: all .25s; -moz-transition: all .25s; -ms-transition: all .25s; -o-transition: all .25s; -o-transition: all .25s; transition: all .25s;}.test.active:before{ -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); }.test.active:after{ top: 20px; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); }.test .dropdown { position: absolute; right: 0; left: 0; display: none; padding: 0; border-radius: inherit; border: 1px solid #d2d2d2; box-shadow: 2px 2px 5px rgba(0,0,0,.4);}.test.active .dropdown { display: block;}.test .dropdown:before { position: absolute; right: 13px; bottom: 100%; width: 0; height: 0; content: ""; border-width: 0 8px 8px; border-style: solid; border-color: #d2d2d2 transparent;}.test .dropdown:after { position: absolute; right: 15px; bottom: 100%; width: 0; height: 0; content: ""; border-width: 0 6px 6px 6px; border-style: solid; border-color: #ffff transparent;}.test .dropdown li { float: left; width: 129px; font-size: 14px; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; text-align: center;}.test .dropdown li:first-of-type { border-radius: 3px 3px 0 0;}.test .dropdown li:last-of-type { border-radius: 0 0 3px 3px;}.test .dropdown li:hover { color: #fff; background: #c43c3d;}For the two pseudo-elements: before and :after, you can check out my previous blog.
The js code is as follows:
function DropDown(el) { this.dd = el; this.span = this.dd.children('span'); this.li = this.dd.find('ul.dropdown li'); this.val = '';}DropDown.prototype.initEvents = function() { var obj = this; obj.dd.on('click', function(event){ $(this).toggleClass('active').siblings().removeClass('active'); event.stopPropagation(); }); obj.li.on('click', function() { var opt = $(this); obj.val = opt.html(); if (obj.span.html() == obj.val) return; obj.span.html(obj.val); $(document).click(function() { $('.test').removeClass('active'); }); })}var test1 = new DropDown($('#type'));var test2 = new DropDown($('#kind'));test1.initEvents();test2.initEvents()Here, a DropDown object is created using the constructor-prototype combination mode. The constructor-prototype combination mode is explained: the attribute is written in the constructor, which represents the attributes unique to each instance, so that the object is concrete; the method is written outside the constructor, which is to represent the method shared by each instance.
But a little bad way here is that the layout of the html has been restricted.
Wonderful topic sharing: JavaScript selection box operation summary jquery selection box operation summary
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.