在网页设计中,搜索框是一个非常重要的元素,可以为用户提供方便快捷的搜索功能。在使用CSS时,我们可以通过以下步骤来添加一个简单的搜索框:1. 创建 HTML 结构首先,我们需要创建搜索框的 HTML
<div class="search"> <form> <input type="text" placeholder="在此输入搜索内容"> <button type="submit">搜索</button> </form> </div>
.search { position: relative; width: 300px; } .search form input[type="text"] { width: 100%; padding: 10px; border: 1px solid #CCC; border-radius: 5px; background-color: #F6F6F6; font-size: 16px; color: #222; outline: none; } .search form button[type="submit"] { position: absolute; right: 0; top: 0; width: 80px; height: 100%; border: none; border-radius: 5px; background-color: #1E90FF; color: #FFF; font-size: 16px; cursor: pointer; }
var btn = document.querySelector(".search form button[type='submit']"); btn.addEventListener("click", function(e) { e.preventDefault(); // 执行搜索操作 });
粉丝
0
关注
0
收藏
0