在网上找了很久,发现很少有关于label的css样式,这里是自己手写的一个label,这里跟大家分享一个近期做的一个~~:整个html页面如下
<!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>label 美化</title>
<style type="text/css">
label.yellow{
width:55px;height:24px;display:block;float:left;background:url(yellow.png) no-repeat left top;line-height:22px;color:#616161;padding-left:18px;margin-right:5px;
}
label.blue{
width:55px;height:24px;display:block;float:left;background:url(blue.png) no-repeat left top;line-height:22px;color:#616161;padding-left:18px;margin-right:5px;
}
label.red{
width:55px;height:24px;display:block;float:left;background:url(red.png) no-repeat left top;line-height:22px;color:#616161;padding-left:18px;margin-right:5px;
}
label.green{
width:55px;height:24px;display:block;float:left;background:url(green.png) no-repeat left top;line-height:22px;color:#616161;padding-left:18px;margin-right:5px;
}
* html label{
float:none;display:inline;padding:5px 15px 10px 18px;margin-right:10px;vertical-align:middle;
}
input{
height:20px;width:220px;border:1px solid #BFBFBF;padding:4px 4px 0 4px;
}
p.input:hover label.yellow, p.input:active label.yellow, p.input:focus label.yellow{
background:url(yellow.png) no-repeat left -20px;color:#FFC125;
}
p.input:hover label.blue, p.input:active label.blue, p.input:focus label.blue{
background:url(blue.png) no-repeat left -20px;color:#FFC125;
}
p.input:hover label.red, p.input:active label.red, p.input:focus label.red{
background:url(red.png) no-repeat left -20px;color:#FFC125;
}
p.input:hover label.green, p.input:active label.green, p.input:focus label.green{
background:url(green.png) no-repeat left -20px;color:#FFC125;
}
</style>
</head>
<body>
<p class="input">
<label for="author" class='blue' >姓 名</label><input type="text" aria-required="true" tabindex="1" size="12" value="" id="author" name="author" >
</p>
<p class="input">
<label for="email" class='yellow'>邮 件</label><input type="text" aria-required="true" tabindex="2" size="12" value="" id="email" name="email" >
<p>
<p class="input">
<label for="address" class='red'>地 址</label><input type="text" aria-required="true" tabindex="1" size="12" value="" id="address" name="address">
</p>
<p class="input">
<label for="phone" class='green'>电 话</label><input type="text" aria-required="true" tabindex="2" size="12" value="" id="phone" name="phone" >
</p>
<p>
</body>
</html>
图片的话,是自己随意从网上找了一个,截图下来的,可供大家参考~~:
整个效果预览图如下:
以下为一些图片资源: