设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 技术交流 › Web开发 › 请问，要如何在input标签内插入img？
返回列表 发新帖
查看: 2514|回复: 4

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

[复制链接]
krpa
发表于 2018-8-7 10:35:15 | 显示全部楼层 |阅读模式

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

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

x
本帖最后由 不二如是 于 2018-8-7 11:34 编辑
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <meta name="keyword" content="小宠,兔子,龙猫,仓鼠,豚鼠,荷兰猪,萌宠,萌图,宠物,科普">
  6.     <meta name='description' content="养宠知识,动物趣闻,小宠商城,小动物视频">
  7.     <meta name="author" content="krpa">
  8.     <meta name="viwepoint" content="width=device-width,initial-scale=1.0">
  9.     <title>小宠之家</title>
  10.     <link rel="icon" href="img/icon/1.jpg" type="image/jpg">
  11.     <link rel="stylesheet" type="text/css" href="css/header-icon.css">

  13. </head>
  14. <body>
  15. <!--header-->
  16. <div id="header">
  17.     <!--鱼油的页面-->

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


  25. </div>
  26. <!--nav-->
  27. <div id="nav">
  28.     <ul>
  29.         <li class="tuzi">
  30.             <a href="tuzi"></a>
  31.             <p>小兔子</p>
  32.         </li>
  33.         <li class="cangshu">
  34.             <a href="canshulianjie"></a>
  35.             <p>小仓鼠</p>
  36.         </li>
  37.         <li class="longmao">
  38.             <a href="longmaolianjie"></a>
  39.             <p>小龙猫</p>
  40.         </li>
  41.         <li class="helanzhu">
  42.             <a href="荷兰猪链接"></a>
  43.             <p>荷兰猪</p>
  44.         </li>
  45.     </ul>
  46. </div>

  48. </body>
  49. </html>
复制代码


如何实现淘宝搜索栏

最佳答案
月排行榜 / 总排行榜
不二如是
2018-8-7 11:31:40
本帖最后由 不二如是 于 2018-8-7 11:33 编辑

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

2、 图片素材（VIP免费）： search.zip (2.36 KB, 下载次数: 2, 售价: 3 鱼币) ，直接放到最外面，鱼油按需修改调用路径。

3、效果： Snip20180807_283.png
代码：
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <meta name="keyword" content="小宠,兔子,龙猫,仓鼠,豚鼠,荷兰猪,萌宠,萌图,宠物,科普">
  6.     <meta name='description' content="养宠知识,动物趣闻,小宠商城,小动物视频">
  7.     <meta name="author" content="krpa">
  8.     <meta name="viwepoint" content="width=device-width,initial-scale=1.0">
  9.     <title>小宠之家</title>
  10.     <link rel="icon" href="img/icon/1.jpg" type="image/jpg">
  11.     <link rel="stylesheet" type="text/css" href="css/header-icon.css">
  12.     <style>
  13.         .box{
  14.             width: 200px;
  15.             position: relative;
  16.         }
  17.         .box .icon-search{
  18.             background: url(search.png) no-repeat;
  19.             width: 20px;
  20.             height: 20px;
  21.             position: absolute;
  22.             top: 6px;
  23.             left: 0;
  24.         }
  25.         .box .search{
  26.             padding-left: 30px;
  27.             height: 25px;
  28.         }
  29.     </style>
  30. </head>
  31. <body>
  32. <!--header-->
  33. <div id="header">
  34.     <!--鱼油的页面...-->

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


  43. </div>
  44. </body>
  45. </html>
复制代码

淘宝搜索栏

淘宝搜索栏
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

不二如是
发表于 2018-8-7 11:31:40 | 显示全部楼层    本楼为最佳答案   

请问，要如何在input标签内插入img？

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

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

2、 图片素材（VIP免费）： search.zip (2.36 KB, 下载次数: 2, 售价: 3 鱼币) ，直接放到最外面，鱼油按需修改调用路径。

3、效果： Snip20180807_283.png
代码：
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <meta name="keyword" content="小宠,兔子,龙猫,仓鼠,豚鼠,荷兰猪,萌宠,萌图,宠物,科普">
  6.     <meta name='description' content="养宠知识,动物趣闻,小宠商城,小动物视频">
  7.     <meta name="author" content="krpa">
  8.     <meta name="viwepoint" content="width=device-width,initial-scale=1.0">
  9.     <title>小宠之家</title>
  10.     <link rel="icon" href="img/icon/1.jpg" type="image/jpg">
  11.     <link rel="stylesheet" type="text/css" href="css/header-icon.css">
  12.     <style>
  13.         .box{
  14.             width: 200px;
  15.             position: relative;
  16.         }
  17.         .box .icon-search{
  18.             background: url(search.png) no-repeat;
  19.             width: 20px;
  20.             height: 20px;
  21.             position: absolute;
  22.             top: 6px;
  23.             left: 0;
  24.         }
  25.         .box .search{
  26.             padding-left: 30px;
  27.             height: 25px;
  28.         }
  29.     </style>
  30. </head>
  31. <body>
  32. <!--header-->
  33. <div id="header">
  34.     <!--鱼油的页面...-->

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


  43. </div>
  44. </body>
  45. </html>
复制代码
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 2 反对 0

使用道具 举报

krpa
 楼主| 发表于 2018-8-8 13:13:56 | 显示全部楼层
请问，i标签在不是只有强调作用么？ <i class="icon-search"></i>为什么这里可以用i标签？？
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

krpa
 楼主| 发表于 2018-8-8 13:15:32 | 显示全部楼层
不二如是 发表于 2018-8-7 11:31
1、这种图标不是直接画在input中的，而是通过外面整体画一个栏实现。

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

请问，i标签在不是只有强调作用么？ <i class="icon-search"></i>为什么这里可以用i标签？？
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

krpa
 楼主| 发表于 2018-8-8 13:20:56 | 显示全部楼层
不二如是 发表于 2018-8-7 11:31
1、这种图标不是直接画在input中的，而是通过外面整体画一个栏实现。

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

谢谢大佬的答复！
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-4-24 17:07

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表