点击伪元素

时间:2017-09-03 16:19:28

标签: html css

有人知道如何让我的::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;
&#13;
&#13;

1 个答案:

答案 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>