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

由 发布于 csshtml
 收藏

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%;
}