我们在做网页的时候,经常需要在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里添加小图标的两种方法,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
来源: http://www.jb51.net/article/128003.htm