小小 风格酷带您学习CSS 创建搜索框
如遇下载链接蓝奏网盘打不开lanzous替换成lanzoux尝试！ 广告
领先实例：
<!DOCTYPE html>
<html>
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css”>
<style>
body {
font-family: Arial;
}
* {
box-sizing: border-box;
}
form.example input[type=text] {
padding: 10px;
font-size: 17px;
border: 1px solid grey;
float: left;
width: 80%;
background: #f1f1f1;
}
form.example button {
float: left;
width: 20%;
padding: 10px;
background: #2196F3;
color: white;
font-size: 17px;
border: 1px solid grey;
border-left: none;
cursor: pointer;
}
form.example button:hover {
background: #0b7dda;
}
form.example::after {
content: “”;
clear: both;
display: table;
}
</style>
</head>
<body>
<h2>搜索框 – 带按钮</h2>
<p>完整宽度:</p>
<form class=”example” action=”/”>
<input type=”text” placeholder=”搜索..” name=”search”>
<button type=”submit”><i class=”fa fa-search”></i></button>
</form>
<p>设置最大宽度 max-width:</p>
<form class=”example” action=”/” style=”margin:auto;max-width:300px”>
<input type=”text” placeholder=”搜索..” name=”search2″>
<button type=”submit”><i class=”fa fa-search”></i></button>
</form>
</body>
</html>
运行结果：
搜索框 – 带按钮
完整宽度:
设置最大宽度 max-width:
第二实例：
<!DOCTYPE html>
<html>
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css”>
<style>
body{
background: #f2f2f2;
font-family: ‘Open Sans’, sans-serif;
}
.search {
width: 100%;
position: relative;
display: flex;
}
.searchTerm {
width: 100%;
border: 3px solid #00B4CC;
border-right: none;
padding: 5px;
height: 20px;
border-radius: 5px 0 0 5px;
outline: none;
color: #9DBFAF;
}
.searchTerm:focus{
color: #00B4CC;
}
.searchButton {
width: 40px;
height: 36px;
border: 1px solid #00B4CC;
background: #00B4CC;
text-align: center;
color: #fff;
border-radius: 0 5px 5px 0;
cursor: pointer;
font-size: 20px;
}
/*调整大小查看搜索栏的变化*/
.wrap{
width: 30%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<h2>搜索框 – 带按钮</h2>
<div class=”wrap”>
<div class=”search”>
<input type=”text” class=”searchTerm” placeholder=”你想找什么?”>
<button type=”submit” class=”searchButton”>
<i class=”fa fa-search”></i>
</button>
</div>
</div>
</body>
</html>
运行结果：
搜索框 – 带按钮
NOTICE:【咨询风格酷】客服微信：wwwxmamnet
NOTICE:【风格酷模板网②群】QQ群：288678775
☉免责声明：本站所有模板均来自用户分享和网络收集，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服，我们核实后会立即删除。
☉如果源码网盘地址失效！或有其他问题，请点我报错,谢谢合作！
☉人民币与积分汇率为1比10,即1元=10积分.有任何疑问请联系客服！
☉如有其他问题，请加网站客服QQ(1131734965)进行交流。
☉本站提供的源码、模板、软件工具等其他资源，都不包含技术服务，请大家谅解！
☉源码、模板等资源会随着技术、环境的升级而存在部分问题，还请慎重选择。
