css使用背景图片制作搜索框
2015-11-30 14:49
736 查看
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>使用图片制作搜索框</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" rel="stylesheet"> <style> .searchCon { width: 330px; height: 35px; background: url(images/search.jpg) no-repeat; position: relative; } .searchCon input.inputText{ width: 235px; height: 24px; line-height: 24px; position: absolute; top: 4px; left: 5px; border: 0; border: none; background: none; } .searchCon input.inputButton { width: 73px; height: 33px; position: absolute; left: 257px; top: 1px; cursor: hand; cursor: pointer; /* filter: alpha(opacity: 0); opacity: 0; */ border: 0; /*隐藏默认属性*/ background: none; /*隐藏默认属性*/ } </head> <body> <div class="searchCon"> <input type="text" class="inputText"> <input type="button" class="inputButton"> </div> <!--使用背景图片的搜索框思路 使背景图片中的输入框和搜索按钮与实际输入框和搜索按钮的位置重合,在完成输入框和搜索按钮的尺寸、文本的调整后,使得一切边框皆为0、一切挡住背景图片的元素均为透明即可。 --> </body> </html>
相关文章推荐
- Web布局连载——两栏固定布局(五)
- [div+css]晒晒最新制作专题推广页模板
- 设计更快的网页(三):字体和 CSS 调整
- 纯CSS制作的新闻网站中的文章列表
- 10条影响CSS渲染速度的写法与使用建议第1/3页
- BS项目中的CSS架构_仅加载自己需要的CSS
- 很不错的 CSS Hack 又学了一招
- 发一个css比较清爽的写法
- CSS expression控制图片自动缩放效果代码[兼容 IE,Firefox]
- css布局网页水平居中常用方法
- CSS经典技巧十则第1/2页
- css 兼容性问题this.style.cursor=''hand''
- IE6不能正常解析CSS文件问题的解决方法及原因分析
- 欲练CSS ,必先解决IE的一些细节分析
- CSS文字截取功能实现代码
- 支持IE6 IE7 Firefox 的纯CSS的下拉菜单
- 不同版本IE使用不同css(css条件注释语句用法)
- css类选择器的使用方法详解
- css文本框与按钮美化效果代码
- 解决ie动态修改link样式,import css不刷新的问题