输入为:valid时无法控制:: after

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代码

评论
  • York
    York 回复

    我认为您不能使用伪选择器来做到这一点。

    If you want, you can add a label instead and with the following code you'll have the desired behaviour:

    <div class="nf-field-element">
      <input type="text" class="your-name" placeholder=" " required>
      <label>Example</label>
    </div>
    
    label {
      position: absolute;
      top: 29px;
      left: 12px;
      color: black;
      font-size: 100%;
      transition: 0.2s;
    }
    
    input:valid + label {
     top: 14px;
     color: lightgray;
     font-size: 70%;
    }