Can't seem to control the div::after
when the input inside is :valid
.
Can someone help? https://jsfiddle.net/Mengolor/0akjcsvf/
input.your-name {
height: auto;
width: 200px;
border: 1px solid lightgray;
border-radius: 2px;
padding: 24px 0px 4px 4px;
}
div.nf-field-element::after {
position: absolute;
top: 29px;
left: 12px;
content: "Example";
color: black;
font-size: 100%;
transition: 0.2s;
}
div.nf-field-element:focus-within::after {
top: 14px;
color: lightgray;
font-size: 70%;
}
input:focus {
outline: none;
}
input:valid {
border: 1px solid green;
}
/* CSS ONLY | When the field is filled the 'Example' label should stay up */
<div class="nf-field-element">
<input type="text" class="your-name" placeholder=" " required>
</div>
仅供参考,无法更改HTML代码
我认为您不能使用伪选择器来做到这一点。
If you want, you can add a
label
instead and with the following code you'll have the desired behaviour: