Jquery实现聚焦input显示下拉框

Jquery实现聚焦input显示下拉框

鼠标聚焦input框,之接显示下拉内容,点击输入框以外的地方因关闭下拉框。非常方便!!!

使用方法
在页面引入相关CSS样式代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
input {
    border: 1px solid #ccc;
    height: 20px;
    padding-left: 5px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s
}
input:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6)
}

input代码

1
2
3
<input type="text" value="哪天" id="i-d">
<input type="text" value="qaq" id="i-d-1">
<input type="text" value="qaq" id="i-d-2">
当前内容只有登录了才能查看,如果您已经注册,请登录
1

发表评论