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

图片的话，是自己随意从网上找了一个，截图下来的，可供大家参考~~：
整个效果预览图如下：

以下为一些图片资源：

css label 样式相关推荐

纯CSS菜单样式，及其Shadow DOM，Json接口实现
先声明,要看懂这篇博客要求你具备少量基础CSS知识, 当然如果你只是要用的话就随便了,不用了解任何知识先放一张效果图 Part 1:纯CSS菜单样式先放样式代码 1 <sty ...
option样式美化 css,CSS select样式优化
下拉选择菜单基本的CSS样式不怎么好看,通过一些简单的样式优化,就可以起到美化的作用了. 请选择您所在的城市请选择您所在的城市中山市太原市广州市 CSS样式 .sel_wrap{ height ...
平台全局 css代码,css全局样式基础代码(示例代码)
简介这篇文章主要介绍了css全局样式基础代码(示例代码)以及相关的经验技巧,文章约900字,浏览量402,点赞数4,值得参考! body{ font-size:12px; font-family:&q ...
css 默认样式初始化
1.css reset:这个是我们在做项目时比较常用的一套css初始化样式,在这里就直接给出代码了 html, body, div, span, applet, object, iframe, h1, ...
reset.css 重置样式表
css重置样式表个人整理工作中常用的css重置样式,和一些样式解决方法,并写上了注释, 大家还有什么好的重置样式,或者一些样式解决方案,欢迎留言讨论. html, body {height: 100 ...
HTML、CSS综合02——css，样式表，选择器、盒子模型
回顾复习什么是标签:标签由<tagName>开始,到</tagName>结束. xml的标签基本都是自定义的 html的标签,基本都是规定好的.(可以使用自定义标签)浏览器对 ...
php文章列表样式,css列表样式有哪些？css设置列表样式的方法
关于列表的css样式有哪些以及如何设置css列表样式?接下来的这篇文章将为大家介绍关于css列表样式的内容. 1.css有序列表(ol)和css无序列表(ul) list.html 列表样式水果苹 ...
前端笔记（9）元素的隐藏与显示，css用户界面样式，vertical-align垂直对齐，溢出文字省略号显示，css精灵技术，过渡，焦点，滑动门，margin负值
css样式表/层叠样式表(7) 元素的隐藏与显示 (1)dispaly显示 (2)visibility可见性 (3)overflow溢出 css用户界面样式鼠标样式cursor 轮廓线outline ...
css折叠样式（1）——使用css样式的三种方式
一.css的声明标签是告诉浏览器应该是用什么形式去解析你,一般为:<!DOCTYPE html> 因为html5支持向下兼容,详细可看上图. 二.css样式的使用方式: (1)内链样式表 ...
25.CSS其他样式
第十九章 CSS其他样式一.黑色和透明度属性值说明 CSS版本 color 颜色值设置文本前景色 ...

css label 样式

css label 样式相关推荐

最新文章

热门文章