[英]How to make field stay in the same place with changing it's attributes with :focus?
I'm trying to achieve the same effect as Google login page has for it's field (ie upon clicking the field the placeholder changes location, size and color). 我正在尝试实现与Google登录页面的字段相同的效果(即,单击该字段后,占位符会更改位置,大小和颜色)。
So far I've come up with this: https://jsfiddle.net/rb846sdn/ 到目前为止,我想出了这个: https : //jsfiddle.net/rb846sdn/
CSS: 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;
}
The problem is that changing the position of the input placeholder to absolute and managing it's position that way moves the whole field which is not behavior I'm looking for . 问题是,改变输入占位符的位置绝对和管理它的位置,这样移动整场这不是行为我要找的 。
And now the questions: 现在的问题是:
1) How to move and resize the placeholder text without moving the field location (and it's borders)? 1)如何在不移动字段位置(及其边界)的情况下移动占位符文本并调整其大小?
2) Is it possible to do this without Javascript/jQuery? 2)是否可以在没有Javascript / jQuery的情况下执行此操作?
Most answers I've found use Javascript but this one uses just CSS and works great! 我发现的大多数答案都使用Javascript,但是这一答案仅使用CSS,效果很好!
Source . 来源 。 User who answered: user:9440820
回答的用户:user: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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.