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>
 

<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>
 

$(".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');
				});