JS Input里添加小图标的两种方法

2019-11-19 14:56:56

字体：大中小

来源：转载

供稿：网友

我们在做网页的时候，经常需要在input里面添加小图标，那么这里就介绍比较常见的两种方法。

方法一

将小图标当做input的背景来插入，直接上代码吧：

<style type="text/css">      *{        margin: 0;        padding: 0;      }      input{        border: none;      }      .box{        height: 50px;        background: yellow;      }      .box input{        width: 200px;        height: 30px;        border-radius: 15px;        margin: 10px 0;        background: url(image/search.gif) no-repeat;        background-color: white;        background-position: 3px;        padding-left: 30px;        border: 1px solid black;        outline: none;      }    </style>  </head>  <body>    <div class="box">      <input type="text" class="username" value="搜索"/>    </div>  </body>

方法二

使用 i 标签插入

<style type="text/css">      *{        margin: 0;        padding: 0;      }      .box{        width: 200px;        position: relative;      }      .box .icon-search{        background: url(image/search.gif) no-repeat;        width: 20px;        height: 20px;        position: absolute;        top: 6px;        left: 0;      }      .box .username{        padding-left: 30px;        height: 25px;      }    </style>  </head>  <body>    <div class="box">      <i class="icon-search"></i>      <input type="text" class="username" value="搜索"/>    </div>  </body>

总结

以上所述是小编给大家介绍的JS Input里添加小图标的两种方法，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

上一篇：解决vue组件中使用v-for出现告警问题及v for指令介绍

下一篇：fetch 使用及如何接收JS传值