展开全部
原理就是放置一个层在input的上方，用js实现的话可以根据内容进行动态增删，我帮你写了一个css写死的层，基本原理应该就是这个了，你可以在这个基础上根据自己需求拓展一下。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#main{
}
#ser{
font-size: 14px;
padding: 8px;
width: 250px;
}
.overInput{
background-color: tomato;
color: #fff;
padding: 5px;
font-size: 12px;
cursor: pointer;
}
#overContarner{
position: absolute;
left: 0;
top: 0;
width: 270px;
height: 40px;
line-height: 48px;
text-align: right;
}
.overInput:hover{
background-color: #FF0000;
}
a{text-decoration: none}
</style>
</head>
<body>
<div id="main">
<input id="ser" type="text" placeholder="" />
<div id="overContarner">
<a class="overInput" href="#">老虎</a>
<a class="overInput" href="#">老鼠</a>
<a class="overInput" href="#">分不清楚</a>
</div>
</div>
</body>
</html>
效果是这样的
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
