我有一个简单的注册表单,我正在构建,我添加了代码,以便在单击时更改输入字段的高度。
这是HTML:
<body>
<div id="container">
<img id="logo" src="logo.png"/>
<h2>Register Your Device</h2>
<form id="preload">
<fieldset>
<label>SERIAL NUMBER<br>
<input type="text" name="registrationid">
</label><br>
<label>USERNAME<br>
<input type="text" name="username">
</label><br>
<label>PASSWORD<br>
<input type="password" name="password">
</label>
</fieldset>
<fieldset>
<input class="button" type="button" name="register" value="REGISTER">
</fieldset>
</form>
</div>
以下是CSS:
input {
font-family: "Helvetica", Arial, sans-serif;
outline:none;
border: 1px solid #e8e8e8;
border-radius: 10px;
padding:10px 10px;
margin:10px 0 20px 0;
width:100%;
max-width: 290px;
height:15px;
transition:0.3s;
}
input:focus {
height:30px;
color:#3ea9f5;
border:1px solid #3ea9f5;
}
现在我的问题是,当我只希望表单在单击时转换为高度时,它会使表单在加载时淡入。
我使用了这个小方法:
.preload * {
transition:none;
}
它消除了转换中不需要的淡入淡出,但当我点击不同的形式时,高度会立即跳回到原始高度,而不会转换到原始高度。
我该如何解决这个问题?希望我措辞得足以得到答案。
答案 0 :(得分:0)
input
的转换属性未指定要设置动画的属性,因此默认选择所有属性以应用转换。
试试这个:
input {
border: 1px solid #e8e8e8;
transition: height 0.3s ease, border-color 0.3s ease;
}
input:focus {
border-color: #3ea9f5;
}
仅定位要转换的选择器的特定属性。使用ease
也可以平滑过渡。另外,请不要忘记为transition
添加浏览器回退。