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

HTML搜索框样式设计

最新推荐文章于 2024-05-01 04:36:25 发布

吃素的小动物

最新推荐文章于 2024-05-01 04:36:25 发布

阅读量185

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/kamibaba/p/6628834.html

<!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>

效果：