PHP表格列表美化技巧：CSS表单Label样式优化代码，提升表单视觉效果，适用于phpStudy环境

化表单&＃xff0c;效果如下&＃xff1a;

每个lebal有箭头的背景

有焦点的lebal背景高亮

示例如下&＃xff1a;

代码如下&＃xff1a;

代码如下:

姓 名

邮 件

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;}

完整测试代码:

#commentform{

font-size:12px;

}

#commentform label{width:55px;height:24px;display:block;float:left;background:url(http://files.phpstudy.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(http://files.phpstudy.net/demoimg/201005/label.png) no-repeat left -40px;color:#000;

}

#commentform input#submit{width:82px;height:24px;background:url(http://files.phpstudy.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(http://files.phpstudy.net/demoimg/201005/submit.png) no-repeat left bottom;color:#000;}

姓 名

邮 件

提示&＃xff1a;您可以先修改部分代码再运行

请注意图片的地址。