span无响应问题：输入框聚焦/验证有效时无法触发上移样式

核心问题 #

你的CSS选择器逻辑错误：~（通用兄弟选择器）仅能选中当前元素之后的同级元素，但你的HTML中<span class="logtxt">在<input>之前，导致.loginput:valid ~ .logtxt无法匹配到目标span，样式自然不生效。

修复步骤 #

1. 调整HTML结构

将span移到input之后，让兄弟选择器可以正常匹配：

<div class="login">
    <input type="text" name="log" id="log" class="loginput" required="required">
    <span class="logtxt">Никнейм или почта</span>
</div>

2. 修改CSS样式

调整span的定位，并完善触发条件（同时覆盖获焦和验证有效场景）：

.login{
    position: relative;
    display: flex;
    margin-bottom: 10px; /* 把input的margin-bottom移到容器上，避免布局混乱 */
}
.loginput{
    padding: 10px;
    width: 100%; /* 可选：让input占满容器宽度 */
}
.logtxt{
    position: absolute;
    pointer-events: none;
    left: 12px;
    top: 0;
    color: gray;
    transition: all ease-in-out .4s;
    padding: 10px;
    transform: translateY(0);
    background-color: white; /* 可选：添加背景色避免被input内容遮挡 */
}
/* input获焦或验证有效时，触发span上移效果 */
.loginput:focus ~ .logtxt,
.loginput:valid ~ .logtxt{
    font-size: 12px; /* 替换原2px，保证文字可见 */
    transform: translateY(-100%);
    color: #2d2d2d;
}

额外说明 #

• 如果不想调整HTML结构，可以改用:has()选择器（需注意浏览器兼容性）：.login:has(.loginput:focus) .logtxt，但主流场景下调整HTML结构是更稳妥的方案。
• 原代码中font-size: 2px会导致文字几乎不可见，建议改成12px左右的小字体，配合上移效果实现占位符浮动的交互。

内容的提问来源于stack exchange，提问作者NEON