1

最终目标是在输入字段的焦点上移动标签（如材料设计输入）。在 chrome 中，小提琴完美无缺。

<div class="row">
    <div 
        style="position: relative;">
        <div class="col-sm-12">
            <span class="fancy-wrapper">
                <input
                    name="name" type="text"
                    class="form-control &Control/class; login-input" 
                    />
                <label for="name" class="control-label login-label">
                    <span>a label</span>
                </label>
            </span>
        </div>
    </div>
</div>

.login-label {
  position: absolute;
  pointer-events: none;
  top: 12px;
  left: 30px;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
}

.login-input {
  height: 44px;
}

.login-input:focus {
  border-color: #ccc;
  box-shadow: none;
}

.fancy-wrapper > .login-input:focus ~ .login-label,
.fancy-wrapper > .login-input:valid ~ .login-label,
.fancy-wrapper > .login-input:-webkit-autofill ~ .login-label,
.fancy-wrapper > .login-input:focus ~ .control-label,
.fancy-wrapper > .login-input:valid ~ .control-label,
.fancy-wrapper > .login-input:-webkit-autofill ~ .control-label,
.fancy-wrapper > .login-input:focus ~ label,
.fancy-wrapper > .login-input:valid ~ label,
.fancy-wrapper > .login-input:-webkit-autofill ~ label,
.fancy-wrapper > .login-input:focus + *,
.fancy-wrapper > .login-input:valid + *,
.fancy-wrapper > .login-input:-webkit-autofill + *,
.fancy-wrapper > .login-input:focus + *,
.fancy-wrapper > .login-input:valid + *,
.fancy-wrapper > .login-input:-webkit-autofill + *,
.fancy-wrapper > .login-input:focus + *,
.fancy-wrapper > .login-input:valid + *,
.fancy-wrapper > .login-input:-webkit-autofill + *  {
  top: -10px;
  left: 29px;
  background-color: #fff;
  padding: 1px 4px;
  border-radius: 4px;
  margin-top: -2px;
}

https://jsfiddle.net/5tk70Ljx/

4

2 回答 2

1

让我们从所有这些重复规则相互覆盖而您不需要它们的事实开始。其次，-webkit-autofill仅部分 webkit 浏览器支持。Firefox 是基于 Mozilla 渲染引擎的，所以它显然不能工作。我猜 Firefox 会击中它并忽略其他所有内容。

您想要的更简单的解决方案就是使用adjacent sybling选择器。又名加号。

.myInputWrap {
    margin: 20px;
    position: relative;
    font-size: 14px;
    font-family: sans-serif;
}
input {
    padding: 2px;
    line-height: 1;
}
label {
    position: absolute;
    top:0; right:0; bottom:0; left:0;
    padding: 2px;
    line-height: 1;
    pointer-events: none;
    transition: transform 0.25s ease-in-out;
}
label span {
    background: white;
    display:inline-block;
    margin-left:2px;
    margin-top: 2px;
    color: #ddd;
}

input:focus + label,
input:valid + label{
    transform: translateY(-10px);
}
<div class="myInputWrap">
	<input type="text" required >
	<label for="">
		<span>Your Name</span>
	</label>
</div>

您需要使用定位来让标签在您想要的位置开始和结束。我添加了span一个白色背景，使它看起来像边框被隐藏了。你可以简单地把它放在更高的位置，然后不用担心假面具越过这条线。

于 2019-10-01T22:11:32.657 回答
0

我无法验证原因，但如果 -webkit-autofill 未在选择器中使用，则此方法有效。

于 2019-10-01T21:51:34.977 回答