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