label美化css,表单label美化代码
化表单,效果如下:
每个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美化代码相关推荐
- html 表单 元素 美化,jQuery表单元素美化
插件描述:richUI单选按钮,复选框,下拉框,css美化 更新时间:2020-08-01 21:13:17 更新说明:操作按钮方式一致, 如绑定事件等. 具体用法如下:$(function() { ...
- html js文件域val,js实现文件上传表单域美化特效
一款效果非常时尚的文件上传表单域美化特效,下面给出制作的简要教程. 先上几个效果饱饱眼福: 使用方法 这些文件上传域的美化使用的方法都是隐藏原生的元素,然后使用一个元素来制作美化效果. @H_502_ ...
- php 美化js文件,js实现文件上传表单域美化特效_javascript技巧
一款效果非常时尚的文件上传表单域美化特效,下面给出制作的简要教程. 先上几个效果饱饱眼福: 使用方法 这些文件上传域的美化使用的方法都是隐藏原生的元素,然后使用一个元素来制作美化效果. HTML结构 ...
- js模拟表单html形式,JS模拟并美化的表单控件完整实例
本文实例讲述了JS模拟并美化的表单控件效果实例.分享给大家供大家参考.具体如下: 这里演示使用JS美化并模拟网页表单控件,十分漂亮的表单效果,使用时可以将代码内的JS保存为文件, 方便调用,使用方法: ...
- 如何实现表单label 两端对齐
表单label 两端对齐 文章目录 表单label 两端对齐 需求概述 效果图 jq实现方式 demo代码 需求概述 有的强迫症的客户总是要求要两端对齐,首先想到的是text-align:justif ...
- antd-vue中的form表单label标签for导致点击文字触发输入框解决方案
antd-vue中的form表单label标签for导致点击文字触发输入框解决方案 参考文章: (1)antd-vue中的form表单label标签for导致点击文字触发输入框解决方案 (2)http ...
- elementUI 表单label两端对齐
elementUI 表单label两端对齐 第一种label没有带*号 第二种label带*号 第一种label没有带*号 修改之前 修改之后(英文无效) 样式调整 .el-form-content{ ...
- 使用Vue动态生成form表单的实例代码
具有数据收集.校验和提交功能的表单生成器,包含复选框.单选框.输入框.下拉选择框等元素以及,省市区三级联动,时间选择,日期选择,颜色选择,文件/图片上传功能,支持事件扩展. 欢迎大家star学习交流: ...
- 常用正则表达式,常用表单验证javascript代码
常用正则表达式,常用表单验证javascript代码 function f_MobilCheck(as_SourceString) { if(as_SourceString.match(/^13[0 ...
最新文章
- Linux用户必须知道的常用终端快捷键
- leetcode算法题--反转链表 II★
- 怎么用latex写ppt呢?
- fcpx视觉特效插件包 - FxFactory for Mac 支持M1芯片
- NOI数学之提高级:欧拉定理和欧拉函数
- mybatis 依赖于jdbc_使用基础mybatis代替原始jdbc
- JAVA:eclipse文本中文支持
- 大数据平台设计哲学的重构
- Win10使用tensorflow出现ImportError: DLL load failed: 动态链接库(DLL)初始化例程失败
- perl表达 匿名数组和匿名哈希
- 微信小程序图片上传并展示
- 【Matlab学习笔记】【函数学习】一(延时函数pause)
- 《点石成金-访客至上的web和移动可用性设计秘籍》读书笔记
- java web 教学视频_超全面的JavaWeb视频教程
- 慕课网vue播放器最新QQ音乐api
- 《互联网信息资源检索与利用》读书笔记
- kali安装WingIDE遇到软件依赖性问题的处理
- LED及LCD冲突问题解决及LCD的驱动改进(蓝桥杯嵌入式stm32G431RBT6)
- 我是如何通过阿里面试的?
- opencv 将Mat转为图片数据
热门文章
- Verilog中的加法器(半加器,全加器,串行、超前进位加法器)
- android鼠标滚轮事件坐标,android 处理鼠标滚轮事件 【转】
- python pyqt5 窗体自适应_Pyqt5自适应布局实例
- js对文字批注_实现SpreadJS的自定制批注
- OpenLDAP / ubuntu 18.04 下源码编译及安装说明
- 编写一个程序,开启3个线程,这3个线程的ID分别为A、B、C,每个线程将自己的ID在屏幕上打印10遍,要求输出结果必须按ABC的顺序显示;如:ABCABC….依次递推。
- 尹成python爬虫百度云_Python爬虫实战:抓取并保存百度云资源
- mysql授权用户主机_MySQL用户授权(GRANT)
- php 错误记录_PHP中把错误日志保存在系统日志中(Windows系统)
- android里面画布快照,自定义 View - Canvas - 画布操作和快照