http://www.corange.cn/archives/2008/10/2077.html
CSS: <style type="text/css"> input.txtInput { background: #fff; background-repeat: no-repeat; background-position: 2px center; border:1px solid #999; padding:2px 2px 2px 20px; } input.searchInput {background-image: url(search.gif);} input.commentInput {background-image: url(comments.gif);} </style>
上面的代码中 input.txtInput 定义了文本框中有小图标的通用样式,其中 padding 的第四个值是定义文字内容从 20 象素处开始,原因是本文的图片是 16 象素大小,文字四周有 2 象素的边距。具体到实际应用,需要根据你的图片大小决定。
然后,我们又定义了 searchInput 和 commentInput 两个文本框样式,分别设置了2个不同的小图标。这样,我们在设置文本框的 class 时可以这样写:
HTML: <p> <label for="keyword">搜索:</label> <input type="text" name="keyword" id="keyword" class="txtInput searchInput" /> </p> <p> <label for="comment">评论:</label> <input type="text" name="comment" id="comment" class="txtInput commentInput" /> </p>
为你的文本框加一个效果柔和的边框
CSS: <style type="text/css"> input.borderInput { background-image: url(border.gif);; background-repeat: no-repeat; background-position: left top; border:1px solid #d5dee9; padding:3px; } </style>
上面的代码设置了一个背景图,并且左上对齐,当然,我们这个图片通常要宽一些、高一些,然后设置一个和渐变颜色近似的 border 。是的,一个效果柔和的边框实现了。
分享到:
相关推荐
js文本框input验证插件,jquery js input 验证 插件
中小学教师继续教育专业能力模块作业—丰富多彩文本框教学设计.pdf
文本框Input文字自动完成Suggest提示插件,一款Suggest搜索提示插件,暗藏有淘宝首页、有啊首页、Google搜索首页、来点广告搜索的众多下拉提示,实际上演示效果与其真实网站上的相关无几,使用了Yahoo网站的一个搜索...
这是一款jQuery实现的网站搜索框经常用到的文本框input输入关键词后自动补全筛选相关信息的js代码。
首先,要实现的是在文本框输入大写字母自动转换为小写, 其次,在文本框输入小写字母自动转换为大写, 以及使用CSS实现的方法,这个方法可以实现表面上的小写转大写,但是在提交表单和复制粘贴时是不起作用的.
jquery input文本框模拟select选择框获取选定 jquery input文本框模拟select选择框获取选定 jquery input文本框模拟select选择框获取选定
@ #xxx 为需要提示的input的id">本插件是为输入用户名的提示信息而写的 功能虽然简单但对于做开发的人来说每次写这几行代码也实属繁琐 所以我就把这几行代码写成了jquery的插件以求以后用起来更加便捷 简单说明: ...
input文本框里面显示小图片 ,此处只是小做了一个例子
此插件通过查找所有Input框 type="text" 属性 在input 文本框的最后添加一个“X” 插件环境: 基于jQuery + Bootstrap 插件使用: 引用 ClearButton 样式 引用 clearbutton 脚本 注意: 样式应该在Bootstrap的...
丰富文本框
jQuery input点击文本框三级联动下拉菜单代码 jQuery input点击文本框三级联动下拉菜单代码 jQuery input点击文本框三级联动下拉菜单代码
jquery input text文本框模拟select框美化 jquery input text文本框模拟select框美化 jquery input text文本框模拟select框美化 jquery input text文本框模拟select框美化
所以我就想重新研究一下易语言真正的富文本框,先是看了云的丰富文本框,。 发现功能不怎么样,然后翻起了3.4版的黑月丰富文本框的例程,发现功能很不错了。 测试能打开rtf文件,显示rtf文件的图片,而且可以设置...
input文本框里面显示提示信息,鼠标点击文本框提示信息自动消失!
CSS3输入文字input文本框动画效果
有兴趣刚需的可以自己下载,非常实用的jquery代码,可以完美运行,有能力的还可以二次修改!
js实现input文本框点击时文字消失,失去焦点
jQuery input文本框限制文字输入计数显示
js select框美化用input文本框模拟select框美化 js select框美化用input文本框模拟select框美化 js select框美化用input文本框模拟select框美化 js select框美化用input文本框模拟select框美化
input type="text" class="txt" name="qty" value="" onkeyup="this.value=this.value.replace(/[^0-9\.]/g,'')" /> PS:js实现只能输入数字和小数点的文本框 <html><head><meta ...