化表單，效果如下：

每個lebal有箭頭的背景

有焦點的lebal背景高亮

示例如下：

代碼如下：

復制代碼代碼如下:

姓 名

郵 件

css代碼:

復制代碼代碼如下:

#commentform{

font-size:12px;

}

#commentform label{width:55px;height:24px;display:block;float:left;background:url(label.png) no-repeat left top;line-height:22px;color:#999;padding-left:18px;}

* html #commentform label{float:none;display:inline;padding:5px 15px 10px 18px;margin-right:10px;vertical-align:middle;}

#commentform input{height:20px;width:220px;border:1px solid #EEE;padding:4px 4px 0 4px;}

#commentform p.input:hover label,#commentform p.input:active label,#commentform p.input:focus label{

background:url(label.png) no-repeat left -40px;color:#000;

}

#commentform input#submit{width:82px;height:24px;background:url(submit.png) no-repeat left top;margin-left:73px;color:#999;border:0 none;line-height:100%;display:block;padding:0;cursor:pointer;}

#commentform input#submit:hover,#commentform input#submit:active,#commentform input#submit:focus{background:url(submit.png) no-repeat left bottom;color:#000;}

完整測試代碼:

label 美化

#commentform{

font-size:12px;

}

#commentform label{width:55px;height:24px;display:block;float:left;background:url(//files.zyiz.net/demoimg/201005/label.png) no-repeat left top;line-height:22px;color:#999;padding-left:18px;}

* html #commentform label{float:none;display:inline;padding:5px 15px 10px 18px;margin-right:10px;vertical-align:middle;}

#commentform input{height:20px;width:220px;border:1px solid #EEE;padding:4px 4px 0 4px;}

#commentform p.input:hover label,#commentform p.input:active label,#commentform p.input:focus label{

background:url(//files.zyiz.net/demoimg/201005/label.png) no-repeat left -40px;color:#000;

}

#commentform input#submit{width:82px;height:24px;background:url(//files.zyiz.net/demoimg/201005/submit.png) no-repeat left top;margin-left:73px;color:#999;border:0 none;line-height:100%;display:block;padding:0;cursor:pointer;}

#commentform input#submit:hover,#commentform input#submit:active,#commentform input#submit:focus{background:url(//files.zyiz.net/demoimg/201005/submit.png) no-repeat left bottom;color:#000;}

姓 名

郵 件

提示：您可以先修改部分代碼再運行

請注意圖片的地址。

總結

以上是生活随笔為你收集整理的label美化css,表单label美化代码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。