layui社區源碼筆記之layui-input form

時間 2019-11-17

標籤 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>

效果：

相關標籤/搜索