Pure CSS to implement the edit and save buttons of the input box

Original article: Pure CSS to implement the edit and save buttons of the input box

See the effect first

Click the Edit on the right to activate the input on the left, and click the Finish on the right to save the input box content

pointer-events

We all know that the disabled attribute in <input disabled="true"/> can be used to make the input box uneditable, but as an element attribute, it needs to be modified using js. So how do we achieve this in a pure CSS environment? The answer is to use the pointer-events attribute, which is used to define how an element responds to user clicks. For example, the following two examples:

pointer-events: auto
pointer-events: none

1
2
3
4
5
6
7
8


<!-- This a tag sets pointer-events: auto -->
<a style="pointer-events: auto;"
href='https://blog.zhoujump.club'
target="_blank">pointer-events: auto</a>
<!-- This a tag sets pointer-events: auto -->
<a style="pointer-events: none;"
href='https://blog.zhoujump.club'
target="_blank">pointer-events: none</a>

In this example, the a tag with pointer-events: none cannot be clicked, while the a tag with pointer-events: auto can be clicked normally. We can use this method to achieve the effect of disabling the input box.

Complete code

 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">
<!-- I am an old tool user. If you don’t understand its usage, you can read the previous article -->
<input id="s-edit" type="checkbox"/>
<input class="s-input" value="Click the 'Edit' button on the right →"/>
<!-- The content of this label is dynamically assigned using pseudo-elements, so leave it blank here -->
<label class="s-label" for="s-edit"></label>
</div>
<style>
.s-box {//External large box style
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 10px;
    transition: all .3s;
}
.s-box:hover{//External large box style when touched by mouse
    box-shadow: 0 0 10px #ddd;
    transition: all .3s;
}
.s-input,.s-input:focus{//Design input style and remove its default style
    width:calc(100% - 60px);
    font-size: 16px;
    padding: 4px;
    outline: none;
    border: none;
    pointer-events: none;//By default, we make it uneditable
    border: 1px solid #fff;
    transition: all .3s;
}
.s-label{//Right button style
    width: 40px;
    cursor: pointer;
    float: right;
    text-align: center;
}
#s-edit:checked ~ .s-input{//When the button is clicked, the checkbox is selected
    pointer-events: auto;//Make the input editable
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: all .3s;
}
#s-edit{display: none;}//Hide tool input
.s-label::after{content:"Edit";}//Assign button content through pseudo-element
#s-edit:checked ~ .s-label::after{content:"Complete";}//Assign button content when the checkbox is selected by clicking the button
</style>

pointer-events
::after

See the effect first

pointer-events

Complete code

Related knowledge