可选择也可自定义的输入框实现（原创）

来源：互联网发布：下载炫浪网络社区app 编辑：程序博客网时间：2024/05/16 01:26

1.效果：

2.依赖文件 jquery.js bootstrap.js bootstrap.min.css

3.html

<div class="customInput"><div class="inputDiv"><input type="text" id="text" name="text"  /><button class="listBtn"><b class="arrow glyphicon glyphicon-menu-down pull-right black" style="color: #000000;"></b></button></div><div class="selectDiv"><ul class="hidden"><li>111</li><li>111</li><li>111</li><li>111</li></ul></div></div>

4.css

<style>.customInput{width: 250px;margin-left: 100px;margin-top: 100px;}.customInput .inputDiv{width: 250px;margin: 0px;}.customInput .inputDiv input{width: 88%;height: 28px;display: block;float: left;border-right-width: 0px;border-bottom-left-radius: 5px;border-top-left-radius: 5px;}.inputHover{border-bottom-left-radius: 0px;}.listBtnHover{border-bottom-right-radius: 0px;}.customInput .inputDiv .listBtn{width: 12%;height: 28px;display: block;float: left;border-bottom-right-radius: 5px;border-top-right-radius: 5px;}.customInput .selectDiv{width:100%;}.hidden{display: none;}.customInput .selectDiv ul{margin: 0px;padding: 0px;border: solid 1px #000000;height: 200px;width:100%;overflow-y: scroll;}.customInput .selectDiv ul li{text-align: left;padding: 6px 0px 8px 8px;height:28px;list-style: none;}.customInput .selectDiv ul li:hover{background-color: cornflowerblue;}</style>

JS:

$(".customInput").mouseover(function(){$(".customInput .selectDiv ul").removeClass('hidden');});$(".customInput").mouseout(function(){$(".customInput .selectDiv ul").addClass('hidden');});$(".customInput .selectDiv ul li").click(function(){$(".customInput .inputDiv input").val($(this).text());$(".customInput .selectDiv ul").addClass('hidden');});

0 0