html - 文本框文本隐藏 float 标签文本框样式

Question

我想将表单中文本框的标签转换为 float 样式。我已经在悬停和输入框的焦点上执行了操作。这里的问题是当标签 float 并向上移动时，文本被隐藏了。

这是我到目前为止尝试过的 HTML 和 CSS。

.float-label {
    position: absolute;
    left: 0;
    top: 0;
    padding: 10px 6px;
    color: #767676;
    pointer-events: none;
    transition: 0.2s ease all;
}

.form-control:focus ~ .float-label, 
.form-control:not(:focus):valid ~ .float-label {
    top: -18px;
    margin-left:5px;
    font-size: 12px;
    opacity: 1;
    z-index: 1;
    background-color: white;
}

                            <div class="form-group border-lable-flt">
                                <input type="email" class="form-control" id="work_email" required>
                                <label class="float-label" for="workEmail">Work email</label>
                            </div>

Answer 1

您可以使用:placeholder-shown 伪类。如果您不想让 color: transparent 成为占位符文本，您可以完美像素匹配标签和占位符的样式。

.form-group {
  position: relative;
  padding: 20px;
}
.float-label {
    position: absolute;
    left: 25px;
    top: 21px;
    color: #767676;
    pointer-events: none;
    transition: 0.2s ease all;
}

input::placeholder {
  color: transparent;
}

.form-control:focus ~ .float-label, 
.form-control:not(:focus):valid ~ .float-label,
input:not(:placeholder-shown) ~ .float-label {
    top: 5px;
    font-size: 12px;
    opacity: 1;
    z-index: 1;
    background-color: transparent;
}

    <div class="form-group border-lable-flt">
        <input type="email" class="form-control" id="work_email" required placeholder="Work email">
        <label class="float-label" for="workEmail">Work email</label>
    </div>