为何输入内容后邮箱输入框的样式无法保持激活状态？

问题原因 #

你的代码存在两个核心问题：

1. input的type属性不规范：姓名框的type="Full Name"、邮箱框的type="Email"都是无效的HTML输入类型。浏览器会将姓名框默认解析为text类型（只要非空就满足required的:valid状态），但邮箱框若输入内容不符合邮箱格式，会触发:invalid状态，导致input:valid~label样式失效，标签回落。
2. 样式触发条件单一：仅依赖:valid伪类，无法覆盖邮箱输入不合法但已有内容的场景，导致标签异常回落。

解决方案 #

1. 修正input的type属性：姓名框改为标准的type="text"，邮箱框改为type="email"。
2. 优化CSS选择器：添加:not(:placeholder-shown)条件，确保只要输入框有内容，无论格式是否合法，标签都保持在上部。

修改后的代码 #

CSS部分

.wrapper {
    position: relative;
    width: 500px;
    height: 600px;
    background: transparent;
    border: 2px solid rgba(225,225,225,0.5);
    border-radius: 20px;
    backdrop-filter: blur(20px);
    box-shadow: 0 0 30px rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}

.inputbox {
    position: relative;
    width: 100%;
    height: 50px;
    border-bottom: 2px solid #fff;
    margin: 30px 0;
}

h2 {
    text-align: center;
    padding-bottom: 10px;
    width: 300px;
}

.inputbox label {
    position: absolute;
    top: 50%;
    left: 5px;
    transform: translateY(-50%);
    font-weight: bold;
    pointer-events: none;
    transition: 0.5s;
}

/* 优化触发条件：聚焦/有内容/合法时标签上移 */
.inputbox input:focus~label,
.inputbox input:not(:placeholder-shown)~label,
.inputbox input:valid~label {
    top: -4px;
}

.inputbox input {
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    outline: none;
    font-size: 16px;
    font-weight: bold;
    padding: 0 35px 0 5px;
    /* 空占位符确保:not(:placeholder-shown)生效 */
    placeholder: "";
}

.inputbox .icon {
    position: absolute;
    right: 8px;
    line-height: 57px;
}

HTML部分

<div class="wrapper">
    <div class="formbox">
        <h2>Book A Table</h2>
        <form action="#">
            <div class="inputbox">
                <span class="icon">
                    <ion-icon name="person-outline"></ion-icon>
                </span>
                <input type="text" required>
                <label>Full Name</label>
            </div>
            <div class="inputbox">
                <span class="icon">
                    <ion-icon name="mail-outline"></ion-icon>
                </span>
                <input type="email" required>
                <label>Email</label>
            </div>
        </form>
    </div>
</div>

关键说明 #

• :not(:placeholder-shown)：只要输入框有内容，无论格式是否合法，该条件都会触发，彻底解决邮箱输入不规范时标签回落的问题。
• 空placeholder属性：是placeholder-shown伪类生效的必要条件，即使为空字符串也可正常工作。
• 规范后的type属性：符合HTML标准，同时能让浏览器提供原生输入验证提示。

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