HTML ui模仿select 前端

HTML ui模仿select

1 HTML
2 CSS3
3 JavaScript
4 效果

1 HTML

ul模拟select - 锐客网 type="text/javascript" src="https://www.it610.com/article/jquery/jquery-3.5.1.js"> 选项一选项二选项三选项四选项五选项六选项七选项八选项九 type="text/javascript" src="https://www.it610.com/article/demo.js">

2 CSS3

.select-style-box { padding: 0; width: 300px; margin: 10px; font-size: 12px; position: relative; }.select-style-box input { width: 100%; height: 25px; display: block; cursor: pointer; line-height: 25px; overflow: hidden; padding-left: 10px; padding-right: 20px; border: 1px solid #ccc; }.select-style-box ul { left: 0px; top: 28px; margin: 0px; padding: 0px; display: none; width: 330px; z-index: 99999; overflow: hidden; position: absolute; background: #fff; background: #ebebeb; list-style-type: none; border: 1px solid #ccc; }.select-style-box ul li { width: 100%; margin: 0px; padding: 0px; height: 30px; display: block; cursor: pointer; overflow: hidden; line-height: 30px; padding-left: 5px; list-style-type: none; }.hover { background: #ccc; }

3 JavaScript

$(document).ready(function() { $(".select-style-box input").click(function() { var input = $(this); var ul = $(this).parent().find("ul"); if (ul.css("display") == "none") { if (ul.height() > 200) { ul.css({ height: "200" + "px", "overflow-y": "scroll" }); }; ul.show(); ul.hover(function() {}, function() { ul.hide(); }); ul.find("li").click(function() { input.val($(this).text()); ul.hide(); }).hover(function() { $(this).addClass("hover"); }, function() { $(this).removeClass("hover"); }); } else { ul.hide(); } }); });

4 效果 【HTML ui模仿select】