首页 > 代码库 > 精美的HTML5/CSS3表单 带小图标
精美的HTML5/CSS3表单 带小图标
今天我们要来分享一款非常精美的HTML5/CSS3表单,准备地说,这是一款经过美化的input输入表单,每一个输入表单都可以定义其两侧的小图标,非常华丽。另外,这款表单应用还采用了3种不同的风格主题,你可以在演示页的菜单栏中选择一种样式。需要高版本的浏览器才能支持。
你也可以在这里在线演示
下面我们来简单分析一下这款表单的源代码,源代码由HTML代码、CSS代码及Javascript代码组成。一共3组样式,我们只对其中一组作解说。
HTML代码:
<ul data-for="prefix"> <li> <input type="text" placeholder="Type here..." /> </li> <li> <input type="text" placeholder="Type here..." /> </li> <li> <input type="text" placeholder="Type here..." /> </li> <li> <input type="text" placeholder="Type here..." /> </li> <li> <input type="text" placeholder="Type here..." /> </li> <li> <input type="text" placeholder="Type here..." /> </li> <li> <input type="text" placeholder="Type here..." /> </li> <li> <input type="text" placeholder="Type here..." /> </li> <li> <input type="text" placeholder="Type here..." /> </li> <li> <input type="text" placeholder="Type here..." /> </li> <li> <input type="text" placeholder="Type here..." /> </li> <li> <input type="text" placeholder="Type here..." /> </li> <li> <input type="text" placeholder="Type here..." /> </li> <li> <input type="text" placeholder="Type here..." /> </li> <li> <input type="text" placeholder="Type here..." /> </li> <li> <input type="text" placeholder="Type here..." /> </li> <li> <input type="text" placeholder="Type here..." /> </li> <li> <input type="text" placeholder="Type here..." /> </li> <li> <input type="text" placeholder="Type here..." /> </li> <li> <input type="text" placeholder="Type here..." /> </li> <li> <input type="text" placeholder="Type here..." /> </li> <li> <input type="text" placeholder="Type here..." /> </li> <li> <input type="text" placeholder="Type here..." /> </li> <li> <input type="text" placeholder="Type here..." /> </li> </ul>
很简单,用一组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() { var className, preElem; className = $(this).attr(‘class‘).replace(‘pre‘, ‘‘).replace(‘ppfix‘, ‘‘).trim(); preElem = ‘<span> </span>‘; $(this).before(preElem); }); /* Postfix */ $(‘.ppfix.post‘).each(function() { var className, preElem; className = $(this).attr(‘class‘).replace(‘post‘, ‘‘).replace(‘ppfix‘, ‘‘).trim(); preElem = ‘<span> </span>‘; $(this).after(preElem); });});
以上代码只是一些最核心的代码,全部代码大家可以下载源码来研究。源码下载>>
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。