[已解决]请问，要如何在input标签内插入img？

krpa · 发表于 2018-8-7 10:35:15

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由不二如是于 2018-8-7 11:34 编辑

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="keyword" content="小宠,兔子,龙猫,仓鼠,豚鼠,荷兰猪,萌宠,萌图,宠物,科普">
    <meta name='description' content="养宠知识,动物趣闻,小宠商城,小动物视频">
    <meta name="author" content="krpa">
    <meta name="viwepoint" content="width=device-width,initial-scale=1.0">
    <title>小宠之家</title>
    <link rel="icon" href="img/icon/1.jpg" type="image/jpg">
    <link rel="stylesheet" type="text/css" href="css/header-icon.css">

</head>
<body>
<!--header-->
<div id="header">
    <!--鱼油的页面-->

    <!--搜索栏-->
    <div id="searchBar">
        <img src="search.png" alt=""><input  name="searchbar" type="text" class="search" placeholder="萌图、视频、知识科普" autocomplete="off">
    </div>


</div>
<!--nav-->
<div id="nav">
    <ul>
        <li class="tuzi">
            <a href="tuzi"></a>
            <p>小兔子</p>
        </li>
        <li class="cangshu">
            <a href="canshulianjie"></a>
            <p>小仓鼠</p>
        </li>
        <li class="longmao">
            <a href="longmaolianjie"></a>
            <p>小龙猫</p>
        </li>
        <li class="helanzhu">
            <a href="荷兰猪链接"></a>
            <p>荷兰猪</p>
        </li>
    </ul>
</div>

</body>
</html>

如何实现淘宝搜索栏

最佳答案

月排行榜 / 总排行榜

不二如是

2018-8-7 11:31:40

本帖最后由不二如是于 2018-8-7 11:33 编辑

1、这种图标不是直接画在input中的，而是通过外面整体画一个栏实现。

2、图片素材（VIP免费）：

search.zip (2.36 KB, 下载次数: 2, 售价: 3 鱼币) ，直接放到最外面，鱼油按需修改调用路径。

3、效果：

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="keyword" content="小宠,兔子,龙猫,仓鼠,豚鼠,荷兰猪,萌宠,萌图,宠物,科普">
    <meta name='description' content="养宠知识,动物趣闻,小宠商城,小动物视频">
    <meta name="author" content="krpa">
    <meta name="viwepoint" content="width=device-width,initial-scale=1.0">
    <title>小宠之家</title>
    <link rel="icon" href="img/icon/1.jpg" type="image/jpg">
    <link rel="stylesheet" type="text/css" href="css/header-icon.css">
    <style>
        .box{
            width: 200px;
            position: relative;
        }
        .box .icon-search{
            background: url(search.png) no-repeat;
            width: 20px;
            height: 20px;
            position: absolute;
            top: 6px;
            left: 0;
        }
        .box .search{
            padding-left: 30px;
            height: 25px;
        }
    </style>
</head>
<body>
<!--header-->
<div id="header">
    <!--鱼油的页面...-->

    <!--搜索栏-->
    <div class="box">
        <i class="icon-search"></i>
        <input  name="searchbar" type="text" class="search" placeholder="萌图、视频、知识科普" autocomplete="off">
    </div>


</div>
</body>
</html>

跳转到最佳答案楼层

不二如是 · 发表于 2018-8-7 11:31:40

本帖最后由不二如是于 2018-8-7 11:33 编辑

1、这种图标不是直接画在input中的，而是通过外面整体画一个栏实现。

2、图片素材（VIP免费）：

search.zip (2.36 KB, 下载次数: 2, 售价: 3 鱼币) ，直接放到最外面，鱼油按需修改调用路径。

3、效果：

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="keyword" content="小宠,兔子,龙猫,仓鼠,豚鼠,荷兰猪,萌宠,萌图,宠物,科普">
    <meta name='description' content="养宠知识,动物趣闻,小宠商城,小动物视频">
    <meta name="author" content="krpa">
    <meta name="viwepoint" content="width=device-width,initial-scale=1.0">
    <title>小宠之家</title>
    <link rel="icon" href="img/icon/1.jpg" type="image/jpg">
    <link rel="stylesheet" type="text/css" href="css/header-icon.css">
    <style>
        .box{
            width: 200px;
            position: relative;
        }
        .box .icon-search{
            background: url(search.png) no-repeat;
            width: 20px;
            height: 20px;
            position: absolute;
            top: 6px;
            left: 0;
        }
        .box .search{
            padding-left: 30px;
            height: 25px;
        }
    </style>
</head>
<body>
<!--header-->
<div id="header">
    <!--鱼油的页面...-->

    <!--搜索栏-->
    <div class="box">
        <i class="icon-search"></i>
        <input  name="searchbar" type="text" class="search" placeholder="萌图、视频、知识科普" autocomplete="off">
    </div>


</div>
</body>
</html>

krpa · 发表于 2018-8-8 13:13:56

请问，i标签在不是只有强调作用么？ <i class="icon-search"></i>为什么这里可以用i标签？？

krpa · 发表于 2018-8-8 13:15:32

不二如是发表于 2018-8-7 11:31
1、这种图标不是直接画在input中的，而是通过外面整体画一个栏实现。

2、图片素材（VIP免费）：，直接 ...

请问，i标签在不是只有强调作用么？ <i class="icon-search"></i>为什么这里可以用i标签？？

krpa · 发表于 2018-8-8 13:20:56

不二如是发表于 2018-8-7 11:31
1、这种图标不是直接画在input中的，而是通过外面整体画一个栏实现。

2、图片素材（VIP免费）：，直接 ...

谢谢大佬的答复！

账号		自动登录	找回密码
密码			立即注册