Question

我想做以下链接：

JS Fiddle

当我在其他浏览器（chrome和IE）中测试时，它工作正常（每当我调整浏览器屏幕的大小时，文本都会粘在文本框内）。

但是当涉及到firefox时，一切都搞砸了，所以我使用的CSS hacks只适用于firefox。

一切正常，因为我使用媒体查询并使用仅适用于firefox的位置。

但是，当涉及到较小的屏幕（小于768像素）时，文字并没有粘在左侧，而是粘在右侧并跟随屏幕尺寸。

您可以在以下链接上进行测试：

Bootply

以下是代码本身：

HTML：

<div class="container-fluid">
        <div class="container">
            <div class="row padding-row">
                <img class="img-responsive pull-left center-img" src="http://icons.iconarchive.com/icons/uiconstock/e-commerce/128/E-Commerce-Icon-Set-icon.png">
                <h2 class="text-center">My Website</h2>
            </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-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="btnSubmit" class="btn btn-default form-control" data-toggle="popover" data-content="Submit">Log In</button>
            </div>
        </div>
    </div>

CSS：

/* ---- REGION GENERAL ---- BEGIN */

body {
    background-color: #292929;
    font-size: 14px;
    font-family: Roboto, sans-serif;
    font-weight: 400;
    color: white;
}

div[class*="col-"] {
    padding-right: 0px;
}

.input-group[class*="col-"] {
    float: left;
    padding: 0 0 0 15px;
}

.input-group-addon {
    min-width: 40px;
}

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

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

.form-group.focused .control-label {
    transform: translate3d(10px, 0px, 0px) scale(.75);
    z-index: 998;
}

.popover-content {
    color: black;
}

@-moz-document url-prefix() {
    .control-label {
        float: left;
        transform: translate3d(-225px, 10px, 0px) scale(1);
    }

    .form-group.focused .control-label {
        float: left;
        transform: translate3d(-225px, 0px, 0px) scale(.75);
    }
}

@media only screen and (min-width: 768px) {
    @-moz-document url-prefix() {
        .control-label {
            margin-left: 50px;
        }

        .form-group.focused .control-label {
            margin-left: 50px;
        }
    }
}

@media only screen and (min-width: 992px) {
    @-moz-document url-prefix() {
        .control-label {
            margin-left: -20px;
        }

        .form-group.focused .control-label {
            margin-left: -20px;
        }
    }
}

@media only screen and (min-width: 1200px) {
    @-moz-document url-prefix() {
        .control-label {
            margin-left: -90px;
        }

        .form-group.focused .control-label {
            margin-left: -90px;
        }
    }
}

/* ---- REGION GENERAL ---- END */

/* ---- REGION LOGIN PAGE ---- BEGIN */

.padding-row {
    padding-bottom: 20px;
}

.center-img {
    margin-top: 20px;
}

@media only screen and (min-width: 383px) {
    .center-img {
        margin-top: 0px;
    }
}

/* ---- REGION LOGIN PAGE ---- END */

JS：

$(document).ready(function () {
            $(window).resize(function () {
                $('.container').css({
                    position: 'absolute',
                    left: ($(window).width() - $('.container').outerWidth()) / 2,
                    top: ($(window).height() - $('.container').outerHeight()) / 2
                });
            });

            $(window).resize();

            $('.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对浏览器的行为不同，我们应该特定于浏览器。将此添加到您的CSS。

input:focus:-moz-placeholder { color:transparent; } /* Firefox 18- */
input:focus::-moz-placeholder { color:transparent; } /* Firefox 19+ */

Answer 2

您只需使用CSS即可操作占位符。如果您使用本机占位符而不是标签作为占位符，那将是最好的。

    ::-webkit-input-placeholder, 
    :-moz-placeholder,
    ::-moz-placeholder, 
    :-ms-input-placeholder {
        /* Styles */
    }

这适用于不同的浏览器。然后将其包装在不同屏幕尺寸的媒体查询中。

同样在变换中。

-webkit-transform:
-moz-transform: /* firefox */
-ms-transform:
-o-transform:

例如，

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

像占位符文本在Firefox中不能很好地工作

2 个答案: