點擊率僞元件

Question

有人知道如何讓我的::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>

Answer 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>