时间戳

首页 > 解决方案 > 文本框文本隐藏浮动标签文本框样式

html - 文本框文本隐藏浮动标签文本框样式

问题描述

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

这是我迄今为止尝试过的 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>

标签： htmlcss

解决方案

您可以使用: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>

推荐阅读