如何使用CSS设置<input>标签的背景小图标

最新推荐文章于 2022-07-06 16:03:41 发布

zzc1684

最新推荐文章于 2022-07-06 16:03:41 发布

阅读量400

点赞数

分类专栏： Html css 文章标签：如何使用CSS设置<input>标签的背景小图标

本文链接：https://blog.csdn.net/zzc1684/article/details/84761713

版权

Html 同时被 2 个专栏收录

46 篇文章 0 订阅

订阅专栏

css

32 篇文章 0 订阅

订阅专栏

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url=http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]">  
    <html xmlns="[url=http://www.w3.org/1999/xhtml]http://www.w3.org/1999/xhtml[/url]">  
    <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <meta name="author" content="[url=http://www.softwhy.com/]http://www.softwhy.com/[/url]" />  
    <title>蚂蚁部落</title>  
    <style type="text/css">  
        ul  
        {  
           list-style:none;  
        }  
        li  
        {  
           height:30px;  
        }  
        input  
        {  
           width:140px;  
           height:20px;  
           line-height:20px;  
           border:1px solid #0CF;  
           padding-left:20px;  
        }  
        .myname  
        {  
           background:url(mytest/div+css/stock_people.png) center left no-repeat;  
        }  
        .mypw  
        {  
           background:url(mytest/div+css/security.png) center left no-repeat;  
         }  
    </style>  
    </head>  
    <body>  
        <ul>  
            <li><input type="text" class="myname" name="username" /></li>  
            <li><input type="text" class="mypw" name="password" /></li>  
       </ul>  
    </body>  
    </html>