html - 带有关闭按钮的动画搜索表单
问题描述
我想使用 w3schools 示例中的动画搜索表单
input[type=text] {
width: 130px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
<form>
<input type="text" name="search" placeholder="Search..">
</form>
问题是它没有关闭按钮,我如何插入只有在展开后才可见的关闭位?
解决方案
推荐阅读
- python - 如何导入 sacepy.irbempy?我继续收到循环导入错误
- c# - UWP 无法加载文件或程序集“System.Runtime.InteropServices.WindowsRuntime”
- php - 比较数据库中的单词和结果的输出
- java - java.sql.SQLIntegrityConstraintViolationException 未达到 catch 子句
- java - 修复 Android 应用程序的应用内购买
- mysql - 如何从 Google Apps Script 连接到基于 Wordpress 的 MySQL 数据库?
- excel - VBA 引用 SplitRow/SplitColumn
- google-tag-manager - 谷歌标签管理器点击事件跟踪工作但没有显示在任何地方
- python - 试图为不和谐制作一个聊天机器人,但它不起作用
- xamarin.forms - 如何在跨平台 PCL 中使用 iOS AppTrackingTransparency.ATTrackingManager?