您当前位置：首页 > web前端 > 特效 > Css结合背景图片美化Input文本框的效果

Css结合背景图片美化Input文本框的效果

来源：程序员人生发布时间：2013-11-29 05:00:16 阅读次数：3697次

　　本文介绍使用Css结合背景图片美化Input文本框的效果，有的同学不明白文本框和文本域，小编先给大家解释一下，文本框是单行输入的，常见的有输入框、搜索框和上传框等，而文本域是指textarea多行文本的东西。现在您明白了吧？

　　再来看一下本文的Input文本框的美化效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Css结合背景图片美化Input文本框的效果</title><style>*{margin:0;padding:0;}input{border:none;border:1px solid #CCC;vertical-align:middle; }.input {height:24px; line-height:24px; border-right:none; width:200px;}.liulan {width:100px;height:26px;background:url(/uploads/allimg/1202/wfuyu_25bg.jpg) no-repeat; cursor:pointer;}.files{ position:absolute; left:202px; top:52px; heigth:26px;cursor:pointer;filter: Alpha(opacity=0);-moz-opacity:0;opacity:0;}</style></head><body><BR><BR><BR><form method="post" action="" enctype="multipart/form-data"><input type="text" id="txt" name="txt" class="input"><input type="button" onmousemove="f.style.pixelLeft=event.x-60;f.style.pixelTop=this.offsetTop;" value="浏览" size="30" onclick="f.click()" class="liulan"><input type="file" id="f" onchange="txt.value=this.value" name="f" style="height:26px;" class="files" size="1" hidefocus></form><BR><BR><BR><BR></body></html><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.wfuyu.com/' target='_blank'>http://www.wfuyu.com/</a></div>
提示：可修改后代码再运行!

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生

------分隔线----------------------------

上一篇 CSS3:nth-child()伪类选择器

下一篇 CSS滤镜同时过滤文字的解决方法

分享到:

------分隔线----------------------------

为码而活

积分：4237

15粉丝

7关注

栏目热点