`
zzc1684
  • 浏览: 1188142 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

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

阅读更多

 

 

    <!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>  

 

分享到:
评论

相关推荐

    C#编程经验技巧宝典

    2&lt;br&gt;&lt;br&gt;0003 设置程序代码行序号 3&lt;br&gt;&lt;br&gt;0004 开发环境全屏显示 3&lt;br&gt;&lt;br&gt;0005 设置窗口的自动隐藏功能 3&lt;br&gt;&lt;br&gt;0006 根据需要创建所需解决方案 4&lt;br&gt;&lt;br&gt;0007 如何使用“验证的目标架构”功能 4&lt;br&gt;...

    纯CSS3实现漂亮的input输入框动画样式库(Text input love)

    分享一个用纯 CSS3 实现的,漂亮的 input 输入框动画样式库-Text input love。 点击每个输入框都用不同的动画效果,始终显示标签label,并显示 placeholder(占位符)文本。 演示地址:...

    精美CSS3表单 CSS3带小图标表单 3款样式

    今天要向大家分享一款基于CSS3和jQuery的带小图标精美输入表单,该CSS3表单一共有3款样式,需要高版本的浏览器才能支持,不过真的是一款很酷的CSS3表单。 下面我们来简单分析一下这款表单的源代码,源代码由HTML...

    fso浏览54646465465464564

    &lt;tr&gt;&lt;th width="10%"&gt;盘符&lt;/th&gt;&lt;th width="15%"&gt;类型&lt;/th&gt;&lt;th width="20%"&gt;卷标&lt;/th&gt;&lt;th width="15%"&gt;文件系统&lt;/th&gt;&lt;th width="20%"&gt;总容量&lt;/th&gt;&lt;th width="20%"&gt;可用空间&lt;/th&gt;&lt;/tr&gt; &lt;% On Error Resume Next Is...

    js使用小技巧

    &lt;input type=button value=语言设置 onclick="window.external.ShowBrowserUI("LanguageDialog", null)"&gt; &lt;input type=button value=加入收藏夹 onclick="window.external.AddFavorite("http://www.google.com/", ...

    JS学习笔记相关代码-测试代码

    &lt;p&gt; 经测试:图标抖动与bootstrap.min.css;font-awesome.min.css;ace.min.css相关联&lt;/p&gt; 测试样例参见test/tubiao2.html PS:fa-angle-double-down双箭头向下指示的图标,展开操作时用。 任务折叠+进度控制 主要...

    微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)

    上效果图: 一:搜索框功能实现 ... &lt;icon class=searchcion size='20' type='search'&gt;&lt;/icon&gt; &lt;input class= disabled placeholder=请输入关键字 value={{searchValue}}/&gt; &lt;/view&gt; &lt;/view&gt; &lt;view clas

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

    将小图标当做input的背景来插入,直接上代码吧: &lt;style type=text/css&gt; *{ margin: 0; padding: 0; } input{ border: none; } .box{ height: 50px; background: yellow; } .box input{ widt

    本项目包含了 HTML、CSS、JavaScript、JQuery、Vue 等相关知识和小实例,大家一起学习,一起讨论

    简单又令人惊艳的hover效果表单案例 HTML+CSS实现3D旋转卡片 HTML+CSS打造伸缩式导航栏 有点小酷的input输入框动画 HTML+CSS制作闪亮的玻璃图标悬浮效果 HTML+CSS制作富有弹性的导航栏标签 HTML+CSS制作弹性旋转菜单...

    图库新版jQuery焦点图 JS代码

    document.writeln ('&lt;dd&gt;08月05日 网页背景和小图片添加打包下载&lt;/dd&gt;'); document.writeln ('&lt;dd&gt;07月12日 修复搜索、导航和返回顶部BUG&lt;/dd&gt;'); document.writeln ('&lt;dd&gt;06月26日 改进网页背景频道预览功能&lt;/dd&gt;')...

    bootstrap fileinput插件本地化字体图标文件

    前面开发一个系统用了这个插件, 因为属于本地化运行, 无法引用在线css文件, 导致所使用的字体图标也无法正常,所以看了源码找了在线字体, 专门下载归类, 现在分享给大家, 希望可以帮助到各位小伙伴, 费了点...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    1.jquery+div随屏幕滚动特效(支持设置参数滚动) 2.jQuery字符插件之适合留言板的jquery文本框输入字符限制插件下载 3.jquery实现Tooltip提示(文字、链接、地图锚点),自带5种不同样式 4.jQuery实现支付宝隐藏...

    如何清除IE10+ input X 文本框的叉叉和密码输入框的眼睛图标

    对于type=”password”的 input 则会在右方显示一个小眼睛的图标,占击这个图标可以显示已经输入的内容。 好是好,但有时候会画蛇添足,比如已经用js控制了这个功能的时候。 只要使用以下CSS代码可轻松实现隐藏IE...

    Forms:Mint.com的注册页面克隆项目。 这样做是为了增强有关如何在HTML和CSS中构建表单的知识。

    为了使该项目成为可能,我们对如何制作HTLM表单进行了研究,因此使用Input标签来详细说明用户信息请求部分。 使用锚点和按钮标签,边框样式,背景颜色,固定和相对位置以及光标属性,帮助我们制作了按钮。 在Chrome...

    基于html css实现带搜索图标的搜索框功能

    给大家分享一下前端用处很多的带小图标的搜索框的制作方法。 效果展示 基本思路 1、搜索图像用绝对定位放到搜索框的上方 2、input框设置文本缩进,大小为搜索图像大小加上图像左右两边的外边距 准备 只需一个搜索...

    tinyeditor gbk 汉化版

    •编辑器中用到的小图标使用了CSS Sprite技术,减少了http连接 •在主流浏览器中测试通过 •可个人或商业项目中使用,遵循creative commons license 下面来看如何使用: 1,在网页文件中引用TinyEditor提供的js...

    css小技巧汇总

    input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px #FFF inset; } //其中#fff是背景颜色值 2、IE8不支持opacity:0属性,可以加上下面属性: filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0)...

    老男孩Python完美实战课程 14期视频教程 28周Python视频教程 1-14周部分

    ├&lt;老男孩 python3 14期 25周全python3教程&gt; │ ├&lt;L001-老男孩教育-Python14期VIP视频-14节-mp4&gt; │ │ ├01 python s14 day1 开课介绍.avi │ │ ├02 python s14 day1 开课介绍2.avi │ │ ├03 python s14 day1 ...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    +为所有Panel(包括Grid,Tree,Form等)增加枚举类型Icon,其中包含1700多个小图标。 -如果Panel具有IconUrl属性,则IconUrl优先于Icon。 -所有Icon的列表在icon.aspx。 -为Button,MenuItem(MenuButton,...

Global site tag (gtag.js) - Google Analytics