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>

效果：







		

		
posted @ 
2017-03-27 21:15 
青春无语 
阅读(8736) 
评论(0) 
编辑 
收藏 
举报