Question

我在互联网上搜索并找到了一个关于如何进行浮动标签的示例，所以我只是完全遵循示例中提供的内容，但是当我在我的网站上测试时，它并没有完全像它一样工作应该。只要光标聚焦在输入上，标签就会消失。但是当标签位于输入之外时，它可以工作（当处于聚焦和模糊时）。我想念一下吗？

以下是我关注的链接：

Tutorial

JSFiddle Example

以下是代码：

Index.cshtml

<div class="container-fluid">
    <div class="container">
        <div class="row">
            <div class="form-group input-group col-xs-12 col-sm-4 col-md-4 col-lg-4">
                <span class="input-group-addon"><i class="fa fa-user"></i></span>
                <label class="control-label" for="txtUsername">Username</label>
                <input id="txtUsername" class="form-control" type="text" />
            </div>
            <div class="form-group input-group col-xs-12 col-sm-4 col-md-4 col-lg-4">
                <span class="input-group-addon"><i class="fa fa-key"></i></span>
                <label class="control-label" for="txtPassword">Password</label>
                <input id="txtPassword" class="form-control" type="password" />
            </div>
            <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
                <button id="showOverlay" class="btn btn-default form-control" data-toggle="popover" data-content="Submit">Log In</button>
            </div>
        </div>
    </div>
</div>

的site.css

.control-label {
    font-size: 14px;
    font-weight: 400;
    opacity: .6;
    pointer-events: none;
    position: absolute;
    transform: translate3d(-340px, 8px, 0) scale(1);
    transform-origin: left top;
    transition: 300ms;
    z-index: 3;
    color: black;
}

.form-group.focused .control-label {
    transform: translate3d(-340px, 0, 0) scale(0.75);
}

.form-control {
    align-self: flex-end;
}

Site.js

$('.form-control').on('focus blur', function (e) {
    $(this).parents('.form-group').toggleClass('focused', (e.type === 'focus' || this.value.length > 0));
}).trigger('blur');

你的回答非常感谢。

谢谢。

Answer 1

对于一个想知道它为什么不起作用的人，是因为在CSS中，当控件聚焦时我忘了放.form-group.focused .control-label { z-index: 5; opacity: 1; transform: translate3d(-340px, 0, 0) scale(0.75); }：

所以CSS应该是（我只发布解决方案）：

pandoc --mathjax input.md -o output.html

感谢。

Answer 2

我在CSS中更改了此问题。请再次检查！

.control-label {
    font-size: 14px;
    font-weight: 400;
    opacity: 0.4;
    pointer-events: none;
    position: absolute;
    transform: translate3d(10px, 7px, 0) scale(1);
    transform-origin: left top;
    transition: 300ms;
    z-index: 3;
    color: black;
}

.form-group.focused .control-label {
    opacity: 1;
    transform: translate3d(-100px, 10px, 0) scale(0.75);
}

浮动标签未在输入焦点上显示标签

2 个答案: