有人知道如何让我的::after
点击以便能够使用下的输入吗?
form {
position: relative;
}
form label {
pointer-events: none;
}
form label::after {
content: '';
position: absolute;
width: 50%;
height: 100%;
background: transparent;
border: 2px solid red;
top: -6px;
left: -4px;
z-index: 0;
pointer-events: none;
max-width: 300px;
}
form input {
display: inline-block;
position: relative;
z-index: -1;
width: 100%;
max-width: 300px;
padding: 22px 20px 26px 20px;
border: 1px solid gray;
}

<form action="">
<label for="">
</label>
<input type="text">
</form>
&#13;
答案 0 :(得分:1)
您可以使用label
属性来关注input
元素。确保删除pointer-events: none;
属性。否则,它将阻止默认的label
行为。
form {
position: relative;
}
form label {
}
form label::after {
content: '';
position: absolute;
width: 50%;
height: 100%;
background: transparent;
border: 2px solid red;
top: -6px;
left: -4px;
z-index: 0;
max-width: 300px;
}
form input {
display: inline-block;
position: relative;
z-index: -1;
width: 100%;
max-width: 300px;
padding: 22px 20px 26px 20px;
border: 1px solid gray;
}
<form action="">
<label for="test">
</label>
<input type="text" id="test">
</form>