您當前位置：首頁 > web前端 > 特效 > Css結合背景圖片美化Input文本框的效果

Css結合背景圖片美化Input文本框的效果

來源：程序員人生發布時間：2013-11-29 05:00:16 閱讀次數：4015次

　　本文介紹使用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.jyygyx.com/' target='_blank'>http://www.jyygyx.com/</a></div>
提示：可修改后代碼再運行!

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
程序員人生

------分隔線----------------------------

上一篇 CSS3:nth-child()偽類選擇器

下一篇 CSS濾鏡同時過濾文字的解決方法

分享到:

------分隔線----------------------------

為碼而活

積分：4237

15粉絲

7關注

欄目熱點

日本搞逼视频_黄色一级片免费在线观看_色99久久_性明星video另类hd_欧美77_综合在线视频

Css結合背景圖片美化Input文本框的效果