html - 在输入焦点上，CSS 选择器在 Firefox 中不起作用

Question

最终目标是将标签移动到输入字段的焦点上(如 Material 设计输入)。在 chrome 中，fiddle 完美运行。

<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/

Answer 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 ，让它看起来像是隐藏了边框。您可以简单地放置更高的位置，然后不用担心在线上的假面具。