html表单内加入小图标,精美的HTML5/CSS3表单 带小图标
今天我们要来分享一款非常精美的HTML5/CSS3表单,准备地说,这是一款经过美化的input输入表单,每一个输入表单都可以定义其两侧的小图标,非常华丽。另外,这款表单应用还采用了3种不同的风格主题,你可以在演示页的菜单栏中选择一种样式。需要高版本的浏览器才能支持。
你也可以在这里在线演示
下面我们来简单分析一下这款表单的源代码,源代码由HTML代码、CSS代码及Javascript代码组成。一共3组样式,我们只对其中一组作解说。
HTML代码:
很简单,用一组input实现基本的输入表单。这里利用了HTML5的placeholder属性实现输入框空白时默认的提示文字。
接下来是CSS代码,将渲染这些输入表单的样式。
CSS代码:
.postfix{vertical-align:top;display:inline-block;width:20px;height:20px;padding:8px 10px;background:#f2f2f2;border:1px solid #cccdcf;border-left:0;border-top-right-radius:2px;border-bottom-right-radius:2px;-moz-border-radius-topright:2px;-moz-border-radius-bottomright:2px;-webkit-border-top-right-radius:2px;-webkit-border-bottom-right-radius:2px;
}.prefix,
.postfix{font-family:FontAwesome;line-height:1.5em;font-size:16px;color:#737373;
}
其中表单前面的小图标是这样实现的:
.prefix.orange,
.postfix.orange{background:#ffb700;background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmYjcwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjhjMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background:-moz-linear-gradient(top, #ffb700 0%, #ff8c00 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffb700), color-stop(100%,#ff8c00));background:-webkit-linear-gradient(top, #ffb700 0%,#ff8c00 100%);background:-o-linear-gradient(top, #ffb700 0%,#ff8c00 100%);background:-ms-linear-gradient(top, #ffb700 0%,#ff8c00 100%);background:linear-gradient(to bottom, #ffb700 0%,#ff8c00 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb700', endColorstr='#ff8c00',GradientType=0 );border:1px solid #e59500;color:#fff;
}
data:image是CSS3专有的属性,可以用编码的二进制流来生成图片。
Javascript代码:
$(document).ready(function() {/*Force placeholder support*/
if(!Modernizr.input.placeholder){
$("input").each( function(){
thisPlaceholder= $(this).attr("placeholder");if(thisPlaceholder!=""){
$(this).val(thisPlaceholder);
$(this).focus(function(){ if($(this).val() == thisPlaceholder) $(this).val(""); });
$(this).blur(function(){ if($(this).val()=="") $(this).val(thisPlaceholder); });
}
});
}/*Prefix*/$('.ppfix.pre').each(function() {varclassName, preElem;
className= $(this).attr('class').replace('pre', '').replace('ppfix', '').trim();
preElem= ' ';
$(this).before(preElem);
});/*Postfix*/$('.ppfix.post').each(function() {varclassName, preElem;
className= $(this).attr('class').replace('post', '').replace('ppfix', '').trim();
preElem= ' ';
$(this).after(preElem);
});
});
以上代码只是一些最核心的代码,全部代码大家可以下载源码来研究。源码下载>>
html表单内加入小图标,精美的HTML5/CSS3表单 带小图标相关推荐
- 12款界面精美的 HTML5 CSS3 网站模板
这里分享的12款完全采用响应式设计的 HTML5 & CSS3 网站设计模板.每一个细节都精心设计,以创建一个美妙的用户体验.这些响应主题和模板最适合用于电子商务,商业门户网站,个人作品集以及 ...
- 怎么做轮播图中的小圆点html,JQuery和html+css实现带小圆点和左右按钮的轮播图实例...
是的!你没看错!还是轮播图.这次的JQuery的哟!! CSS代码: /*轮播图 左右按钮 小白点*/ #second_div{ margin-top: 160px; } .img_box{ over ...
- HTML5+CSS3+JavaScript 阶段性实践小案例——京东购物车
目录 一.素材提取方法 二.图标 三.实现 (1)效果图 (2)图片素材 (3)代码 花了三天时间将HTML4,HTML5,CSS2,CSS3大致学习了一下,现在来做一个网页实践一下,我是准备专攻后端 ...
- html5表单新增的输入类型,HTML5之表单新增类型介绍
1.html5的input标签的type类型新增介绍: 2.表单新增属性介绍: 3.代码示例: 1970 1980 1990 默认值: form="register" /> ...
- 第四节:HTML5给表单带来的新标签、新属性、新类型
上一章节讲了21个语义化的标签,这一节我们来讲表单标签,HTML5不仅仅给表单带来了新的标签,还给原来的标签带来了新的属性,这一节我们会来介绍介绍它们. 到目前为止,我们对HTML5的学习还是停留在新 ...
- 增加表单的文字段的html的代码是,表单及表单新增元素(示例代码)
要想更好运用表单就要了解表单的的更多元素与属性,首先看看对表单基本了解. 表单的基本了解 元素用于用户输入数据的收集 元素是最重要的表单元素,有许多type其中是用于向表单处理程序提交表单的按钮. 元 ...
- 一套开源免费的OA办公管理系统源码,带小程序、生成APP
大型高端OA源码(带APP 微信小程序) OA办公管理系统源码带小程序.生成APP.基于微软Asp.net 4.0,SQL Server 2008为基础,兼容高级版本的开源办公系统.采用国际领先的响应 ...
- html中内联的form,bootstrap3.0教程之表单(form)使用详解
本文主要讲解的是表单,这个其实对于做过网站的人来说,并不陌生,而且可以说是最为常用的提交数据的Form表单.本文主要来讲解一下内容: 1.基本案例 2.内联表单 3.水平排列的表单 4.被支持的控件 ...
- 小程序七:组件之表单组件
button 按钮组件. 属性名 类型 默认值 说明 size String default 有效值default, mini type String default 按钮的样式类型,有效值prima ...
最新文章
- 2016 多校赛3 A 水 B 期望,规律 C 各种博弈 J 物理题,积分 K 暴力,水
- readelf小尝试
- haproxy LVS nginx的比较
- 基于TestNG 与Selenium 的自动化测试设计与实施
- 强化学习笔记:Q_learning (Q-table)示例举例
- Java并发编程(2):线程中断(含代码)
- 解决IE10以下对象不支持“bind“属性或方法
- 名为 cursor_jinserted 的游标不存在_一个工程师必须了解的测量常识,你不知道怎么行...
- Matlab的语言概述
- 毕业设计总结篇之终结篇——基于android的创意展示平台(混合app)
- 机器学习入门(二)数据分析处理库pandas
- office2007加载缓慢_「excel2003打开2007」excel2007打开很慢怎么办 - seo实验室
- 数据结构学习笔记——栈(1)定义理解
- Java 创建并用应用幻灯片母版
- 民勤一中2021高考成绩排名榜查询,淬火砺剑——民勤一中为2021届高三学子助力加油!...
- LCD12864串行驱动程序
- 商标销售可以是有利可图的业务
- php怎么让日期变成数字形似,excel如何把日期变成纯数字
- 这五件事,二次SaaS创业的老炮儿都在做
- 添加一章每日早报的文章【API接口】
热门文章
- 大一新生信息可视化展示(基于Echarts)
- 2022年上半年信息系统项目管理师案例分析题及答案
- DB2 V9.7 Workgroup 必须打上FixPack 3a才能支持64G内存
- 公路中、边桩坐标计算及放样程序
- 排课表--拓扑排序【自己写的拓扑排序方法】[1]
- new echarts.graphic.LinearGradient内置渐变器
- 【家庭推】日历苹果群发软件imessage查看docker消息
- python爬虫知乎代码_python爬虫知乎的简单代码实现
- windows7 打不开农行客户端登陆
- Bouncy Castle 的 ASN1 使用方法