透明背景,可编辑下拉框

可编辑的下拉框似乎已经有很多实现了,无非是加上一个input,配合监听事件,不过小金金偏爱透明的控件,所有实现有点变化。
依旧是非图片实现(没准,有图片会更方便)

实现效果
透明可编辑下拉框

基本实现

代码

1
2
3
4
5
6
7
8
9
10
11
12

<body>
<div class="select-box">
<input maxlength="2" value="10"/>
<select class="show-select"></select>
<select id='data' class="bottom-select">
<option>5</option>
<option>10</option>
<option>20</option>
</select>
</div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

select{
position: absolute;
background: none;
color:white;
width:50px;
height:20px;
top:40px;left:75px;
border-color: white;
}
.show-select {
z-index:1;
pointer-events: none;
}
.bottom-select {
z-index:0;
color:transparent
}
input {
z-index: 2;
color: white;
background: none;
position: absolute;
width:30px;
height:20px;line-height: 20px;
left:80px;
top:38px;
text-align: center;
border: none;
}

详解

不变的结构是,用input覆盖在select上响应用户输入,排版对齐什么不用说啦
结合css来看,回答几个问题

  1. 为什么要用两个select
    A: 由于所有控件都是透明背景,所以为了既显示出select的可点击部分,又隐藏select中间的内容部分,使用show-select显示控件,使用bottom-select响应事件
  2. pointer-events是什么
    A: pointer-events设为none,则该元素永远不会成为鼠标事件的target,故可以点击到最底层的bottom-select
    具体使用可见pointer-events属性详解
  3. 这样就够了嘛
    A: 当然…..不够,还需要js监听select的change事件
    1
    2
    3
    $('#data').change(function(event){
    $('input').val($('#data').find('option:selected').text())
    })
文章目录
  1. 1. 基本实现
    1. 1.1. 代码
    2. 1.2. 详解
,