在网页开发中,搜索框是一个必不可少的元素,它可以方便用户查找所需要的内容。而在CSS中,设计一个漂亮且实用的搜索框也是非常简单的。首先,我们需要一个基础的HTML结构来容纳搜索框。可以使用一个form
<p> <form> <input type="text" placeholder="搜索..."> <button type="submit">搜索</button> </form> </p>
<p> <form> <input type="text" placeholder="搜索..."> <button type="submit">搜索</button> </form> </p> <pre> form { display: flex; justify-content: center; } input[type="text"] { border: none; border-radius: 20px; padding: 10px; box-shadow: inset 1px 1px 2px rgba(0,0,0,0.1); outline: none; } button[type="submit"] { background-color: #4285f4; color: #fff; border: none; border-radius: 20px; padding: 10px 20px; box-shadow: 1px 1px 2px rgba(0,0,0,0.1); cursor: pointer; transition: all 0.3s ease-in-out; } button[type="submit"]:hover { transform: scale(1.05); box-shadow: 2px 2px 2px rgba(0,0,0,0.2); }
粉丝
0
关注
0
收藏
0