<>CSS 搜索框

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>搜索框</title> <style
type="text/css"> * { margin: 0; padding: 0; } .search-container { margin: 50px;
display: flex; width: 500px; height: 50px; line-height: 50px; }
.search-container input { box-sizing: border-box; flex: 1; height: 50px;
line-height: 50px; outline: none; border: none; border-top-left-radius: 25px;
border-bottom-left-radius: 25px; padding: 0 20px; background-color: #f8f8ff;
border-top: 1px solid silver; border-left: 1px solid silver; border-bottom: 1px
solid silver; } .search-container button { box-sizing: border-box; height: 50px;
line-height: 50px; padding: 0 30px; border: none; background-color: pink;
font-size: 24px; color: #fff; cursor: pointer; border-top-right-radius: 25px;
border-bottom-right-radius: 25px; border-top: 1px solid silver; border-right:
1px solid silver; border-bottom: 1px solid silver; } </style> </head> <body> <
div class="search-container"> <input type="text" placeholder="请输入"> <button>搜索</
button> </div> </body> </html>

技术
下载桌面版
GitHub
百度网盘(提取码:draw)
Gitee
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:ixiaoyang8@qq.com
QQ群:766591547
关注微信