css label 样式

最新推荐文章于 2024-06-28 08:45:00 发布

星之火燎原

最新推荐文章于 2024-06-28 08:45:00 发布

阅读量2.7w

点赞数

分类专栏： css 文章标签： css 样式 label

本文链接：https://blog.csdn.net/baidu_34046383/article/details/53842718

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在网上找了很久，发现很少有关于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>

图片的话，是自己随意从网上找了一个，截图下来的，可供大家参考~~：
整个效果预览图如下：
这里写图片描述
以下为一些图片资源：

这里写图片描述

星之火燎原

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
css label 样式

在网上找了很久，发现很少有关于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 x
复制链接

扫一扫

专栏目录