CSS 转换不适用于表单中的输入元素
[英]CSS transition not working on input element in a form
问题描述
我正在尝试在输入元素上应用转换，但这里有些东西不起作用：
我不知道我哪里错了。 输入元素似乎不受转换标签的影响。
.mainForm { border-radius: 50px; border: springgreen 5px solid; width: 50%; padding: 50px; margin-top: 50px; background-color: rgba(150, 255, 150, 0.5); } input { border: rgba(50, 51, 52, 0.5) solid 5px; border-radius: 50px; font-size: 20px; outline: none; padding: 10px 25px; transition: width.35s ease-in-out; } input:focus { width: 75%; } button { border-radius: 50px; padding: 10px; border: rgba(50, 51, 52, 0.5) solid 5px; transition: width.35s ease-in-out; } button:hover { background-color: rgba(50, 51, 52, 0.25) }
<center style="margin-top: 50px;"> <h1 style="display:inline;font-family:courier;"> <span style="font-family:fantasy;"> Google </span> Search Replica</h1> <form method="get" action="https://google.com/search" autocomplete="off" class="mainForm"> <input name="q" placeholder="Search..."> <button type="submit"><img src="https://image.flaticon.com/icons/png/512/54/54481.png" width="20px"></button> </form> </center>
1 个解决方案
解决方案1
2 已采纳 2021-02-16 17:22:50
您还需要为常规（非悬停） state 定义一个width ，以便转换工作（至于所有应该受转换影响的属性 - 它需要在两个定义的状态之间转换）：
<.DOCTYPE html> <html> <head> <title>Project003 || Google search replica</title> <style type="text/css">:mainForm{border-radius;50px: border;springgreen 5px solid:width;50%: padding;50px:margin-top; 50px: background-color,rgba(150,255,150.0;5):} input{width;25%: border,rgba(50,51,52.0;5) solid 5px:border-radius;50px:font-size;20px:outline;none:padding;10px 25px:transition. width;35s ease-in-out:} input:focus{width;75%:} button{border-radius;50px:padding;10px:border,rgba(50,51,52.0;5) solid 5px:transition. width;35s ease-in-out:} button:hover{background-color,rgba(50,51,52.0:25)} </style> </head> <body> <center style="margin-top; 50px:"> <h1 style="display;inline:font-family;courier:"> <span style="font-family;fantasy:"> Google </span> Search Replica</h1> <form method="get" action="https.//google.com/search" autocomplete="off" class="mainForm"> <input name="q" placeholder="Search..:"> <button type="submit"><img src="https.//image.flaticon.com/icons/png/512/54/54481.png" width="20px"></button> </form> </center> </body> </html>
添加时CSS转换过渡停止工作<script> element
[英]CSS translate transition stops working when adding <script> element
为什么CSS3过渡无法使用JavaScript在元素的设置高度上起作用？
[英]Why CSS3 transition is not working on set height of element using JavaScript?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.