layui社区源码笔记之layui-input form


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>

<style>


.fly-search {
position: relative;
margin-left: 10px;
display: inline-block;
vertical-align: top;
}
.fly-search input {
padding-right: 30px;
}
.layui-input {
display: block;
width: 100%;
padding-left: 10px;
}
.layui-input{
height: 38px;
line-height: 38px;
border: 1px solid #e6e6e6;
background-color: #fff;
border-radius: 2px;
box-sizing: border-box!important;---div 设置的宽高将包含 边框及 padding
}

</style>

//引用图标字体
<link rel="stylesheet" href="../res/css/global.css">
</head>
<body>


<form action="http://cn.bing.com/search" class="fly-search">
<i class="iconfont icon-sousuo"></i>
<input class="layui-input" autocomplete="off" placeholder="搜索内容,回车跳转" type="text" name="q">
</form>


</body>
</html>

效果:




					


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM