如何解决CSS过渡不适用于输入宽度
我希望输入框的width
有所增加或减少,但是我无法使transition
正常工作。有人知道为什么它不起作用吗?
.expand input[type = "text"],.expand input[type = "password"]{
border: 2px solid rgb(0,119,255);
border-radius: 30px;
background: none;
transition: 0.25s;
}
.expand input[type = "text"]:hover,.expand input[type = "password"]:hover{
width: 210px;
border-color: rgb(47,255,57);
}
<form>
<h3 style="color: white; font-family: Montserrat; text-align: center;">Login</h3>
<div class="center">
<div class="expand">
<input type="text" placeholder="Username" style="font-family: Montserrat; height: 30px; text-align: center; color: white; font-size: 13px;">
</div>
</div>
</form>
解决方法
您不能使用width: auto
进行过渡(由于未指定宽度,这是默认设置),因此您的元素需要定义初始宽度。
.expand input[type = "text"],.expand input[type = "password"]{
border: 2px solid rgb(0,119,255);
border-radius: 30px;
background: none;
transition: 0.25s;
width: 100px; /* New CSS */
}
.expand input[type = "text"]:hover,.expand input[type = "password"]:hover{
width: 210px;
border-color: rgb(47,255,57);
}
<form>
<h3 style="color: white; font-family: Montserrat; text-align: center;">Login</h3>
<div class="center">
<div class="expand">
<input type="text" placeholder="Username" style="font-family: Montserrat; height: 30px; text-align: center; color: white; font-size: 13px;">
</div>
</div>
</form>
,
您需要设置输入的初始宽度
.expand input[type = "text"],255);
border-radius: 30px;
background: none;
transition: 0.25s;
width: 100px;
}
.expand input[type = "text"]:hover,57);
}
<form>
<h3 style="color: white; font-family: Montserrat; text-align: center;">Login</h3>
<div class="center">
<div class="expand">
<input type="text" placeholder="Username" style="font-family: Montserrat; height: 30px; text-align: center; color: white; font-size: 13px;">
</div>
</div>
</form>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。