先看效果
点击右侧编辑激活左侧input,点击右侧完成保存输入框内容
pointer-events
我们都知道可以通过<input disabled="true"/>中disabled属性来使输入框不可编辑，但是它作为元素属性需要使用js来修改。那我们纯css环境如何实现呢？
答案是使用pointer-events属性，它用来定义元素如何响应用户的点击。例如下边这两个例子：
pointer-events: auto
pointer-events: none
1
2
3
4
5
6
7
8
|
<!-- 这个a标签设置了pointer-events: auto -->
<a style="pointer-events: auto;"
href='https://blog.zhoujump.club'
target="_blank">pointer-events: auto</a>
<!-- 这个a标签设置了pointer-events: auto -->
<a style="pointer-events: none;"
href='https://blog.zhoujump.club'
target="_blank">pointer-events: none</a>
|
这个例子中被设置了pointer-events: none的a标签无法被点击，而设置了pointer-events: auto的a标签可以正常点击。我们可以使用这种方式曲线救国实现禁用input输入框的的效果
完整代码
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
<div class="s-box">
<!-- 老工具人了，不理解它的用法的可以去看一下之前的文章 -->
<input id="s-edit" type="checkbox"/>
<input class="s-input" value="点击右侧‘编辑’按钮→"/>
<!-- 这个label的内容使用伪元素动态赋予，所以这里留空 -->
<label class="s-label" for="s-edit"></label>
</div>
<style>
.s-box {//外部大盒子样式
background: #fff;
border: 1px solid #ddd;
border-radius: 12px;
padding: 10px;
transition: all .3s;
}
.s-box:hover{//外部大盒子被鼠标摸的样式
box-shadow: 0 0 10px #ddd;
transition: all .3s;
}
.s-input,.s-input:focus{//设计input样式和去除它的默认样式
width:calc(100% - 60px);
font-size: 16px;
padding: 4px;
outline: none;
border: none;
pointer-events: none;//默认情况我们使它无法编辑
border: 1px solid #fff;
transition: all .3s;
}
.s-label{//右侧按钮样式
width: 40px;
cursor: pointer;
float: right;
text-align: center;
}
#s-edit:checked ~ .s-input{//当点击按钮使checkbox被选中时
pointer-events: auto;//使input可以编辑
border: 1px solid #ddd;
border-radius: 4px;
transition: all .3s;
}
#s-edit{display: none;}//隐藏工具人input
.s-label::after{content:"编辑";}//通过伪元素赋予按钮内容
#s-edit:checked ~ .s-label::after{content:"完成";}//当点击按钮使checkbox被选中时赋予按钮内容
</style>
|
相关知识
pointer-events
::after
