标签停止单击输入文本

Question

我正在尝试制作浮动输入标签，当输入文本区域成为焦点时，该标签将浮动在顶部。但是，我遇到了一个问题，我无法单击输入字段，因为标签阻止了我。我可以按的一小部分很难。下面我展示了我的重要代码。

.form {
    background-color: hsl(0, 63%, 72%);
    padding: 2em 4em;
}

.form-group {
    transition: all .3s;
    margin-bottom: 1em;
}

.form-label {
    font-size: 1em;
    display: block;
    opacity: 0.8;
    transform: translateY(-1.25em);
    transform-origin: 0 0;
    transition: all .3s;
    z-index: -999;
}

.form-control {
    box-shadow: none;
    background-color: rgba(0, 0, 0,0.02);
    border-radius: 0px;
    border-color: white;
    border-style: none none solid none;
    width: 100%;
    transition: all .5s;
}

.form-control::placeholder {
    color: transparent;
}

.form-control:focus {
    box-shadow: none;
    outline: none;
    border-color: orange;
}

.form-control:focus + .form-label,
.form-control:not(:placeholder-shown) + .form-label {
    transform: translateY(-2.5em) scale(.8);
}

.form-control:focus-within {
    transform: scale(1.05,1.05);
}

<form class="form">
    <div class="form-group">
        <input type="text" class="form-control" placeholder="Username"></inpu>
        <label for="name" class="form-label">Username</label>
    </div>
    <div>
        <input type="text"  placeholder="Password" class="form-control" class="form-label"></inpu>
        <label for="Password" class="form-label">Password</label>
    </div>
</form>

任何帮助将不胜感激。谢谢

Answer 1

如果pointer-events: none 不适合您，您可以为标签定义display: inline-block 而不是display: block。虽然标签文本的一小部分仍然无法点击，但对于其余的输入，它可以工作......

工作示例：

.form {
    background-color: hsl(0, 63%, 72%);
    padding: 2em 4em;
}

.form-group {
    transition: all .3s;
    margin-bottom: 1em;
}

.form-label {
    font-size: 1em;
    display: inline-block;
    opacity: 0.8;
    transform: translateY(-1.25em);
    transform-origin: 0 0;
    transition: all .3s;
    z-index: -999;
}

.form-control {
    box-shadow: none;
    background-color: rgba(0, 0, 0,0.02);
    border-radius: 0px;
    border-color: white;
    border-style: none none solid none;
    width: 100%;
    transition: all .5s;
}

.form-control::placeholder {
    color: transparent;
}

.form-control:focus {
    box-shadow: none;
    outline: none;
    border-color: orange;
}

.form-control:focus + .form-label,
.form-control:not(:placeholder-shown) + .form-label {
    transform: translateY(-2.5em) scale(.8);
}

.form-control:focus-within {
    transform: scale(1.05,1.05);
}

<form class="form">
    <div class="form-group">
        <input type="text" class="form-control" placeholder="Username"></inpu>
        <label for="name" class="form-label">Username</label>
    </div>
    <div>
        <input type="text"  placeholder="Password" class="form-control" class="form-label"></inpu>
        <label for="Password" class="form-label">Password</label>
    </div>
</form>

Answer 2

如果标签阻止您点击文本区域，并且您出于任何原因不想点击标签，您可以使用：

pointer-events: none;

在标签上，这样任何点击都会通过它。