Question

我试图获得与Google登录页面相同的效果（即点击字段时占位符更改位置，大小和颜色）。

到目前为止，我已经想出了这个： https://jsfiddle.net/rb846sdn/

CSS：

#emailField {
            width: 100%;
            font-family: Roboto,RobotoDraft,Helvetica,Arial,sans-serif;
            font-size: 14px;
            border: none;
            border-bottom: 1px solid lightgrey;
            color: grey;
        }
        #emailField:focus {
            position:absolute;
            font-size: 11px;
            width: 82%;
            top: 2em;
        }

问题在于，将输入占位符的位置更改为绝对位置并按其方式管理它的位置会移动整个字段，这不是我看待for的行为。

现在问题：
1）如何在不移动字段位置（及其边界）的情况下移动和调整占位符文本的大小？
2）没有Javascript / jQuery可以做到这一点吗？

Answer 1

我发现大多数答案都使用Javascript，但这个只使用CSS而且效果很好！

Source。用户回答：用户：9440820

.user-input-wrp {
	position: relative;
	width: 50%;
}
.user-input-wrp .inputText{
	width: 100%;
	outline: none;
	border:none;
	border-bottom: 1px solid #777;
}
.user-input-wrp .inputText:invalid {
	box-shadow: none !important;
}
.user-input-wrp .inputText:focus{
	border-color: blue;
	border-width: medium medium 2px;
}
.user-input-wrp .floating-label {
	position: absolute;
	pointer-events: none;
	top: 18px;
	left: 10px;
	transition: 0.2s ease all;
}
.user-input-wrp input:focus ~ .floating-label,
.user-input-wrp input:not(:focus):valid ~ .floating-label{
	top: 0px;
	left: 10px;
	font-size: 13px;
	opacity: 1;
}

<h1>The floating label</h1>
<div class="user-input-wrp">
  <br/>
  <input type="text" class="inputText" required/>
  <span class="floating-label">Your email address</span>
</div>

如何通过改变它的属性来使场地停留在同一个地方：焦点？

1 个答案: