html5和css3表单样式美化插件

最新推荐文章于 2024-04-29 17:39:24 发布
最新推荐文章于 2024-04-29 17:39:24 发布
阅读量2.9k 收藏 3
点赞数
分类专栏： html5 css 文章标签： html5 CSS3 表单 javascipt
css 同时被 2 个专栏收录
61 篇文章 2 订阅
订阅专栏
html5
36 篇文章 1 订阅
订阅专栏
这是一款使用html5新的type属性制作的表单，并用纯css3来对表单进行美化的html5和css3表单样式美化插件。该表单美化插件美观大方，易于集成，十分实用。

201501051445.jpg


在线演示

[attach]26**[/attach]


这款表单美化插件将美化以下的表单元素：
  • 复选框
  • 单选按钮
  • 下拉选择框
  • 文件选择框
  • textarea文本框
  • input输入框
  • 提交按钮

HTML结构
我们将使用html5新的表单type类型，为保证IE浏览器对html5的支持，我们需要引入下面的代码。
  1. <!–[if IE 7 ]> <html lang="en" class="ie7″> <![endif]–> 
  2. <!–[if IE 8 ]> <html lang="en" class="ie8″> <![endif]–> 
  3. <!–[if IE 9 ]> <html lang="en" class="ie9″> <![endif]–> 
  4. <!–[if (gt IE 9)|!(IE)]><!–> <html lang="en"> <!–<![endif]–>
复制代码

同时还要添加 HTML5 Shiv，并使用下面的CSS来重置样式：

  1. input, select, textarea { 
  2.     margin:0; 
  3.     padding:0; 
  4.     font-size:0.85em /* this is optional, I like the fonts a little smaller */; 
  5.     outline:none; 
  6.     font-family:inherit; box-sizing:border-box /* make sure you use the other vendor prefixes */; 
  7. }
复制代码


下面来看每一个表单元素的美化方式：


单选框和复选框
单选框和复选框的美化效果可以在IE9、FF、Opera和Webkit浏览器上正常工作。



HTML


  1. <input type="checkbox" id="male" /><label for="male">Checkbox</label><br/> 
  2. <input type="radio" name="option" id="female" /><label for="female">Radio 1</label>
  3. <input type="radio" name="option" id="female2" /><label for="female2">Radio 2</label>
复制代码


注意input上的id要和label上的for内容匹配。着可以使我们通过点击label来实现单选按钮和复选按钮的选择。


CSS



  1. input[type="radio"], 
  2. input[type="checkbox"] { 
  3.     position: absolute; left: -999em; 
  4. }
复制代码


接下来我们要使用伪元素添加背景图片来替换label元素。处于加载速度的原因，单选和复选按钮使用了两张图片：选中和为选中状态。每张图片都是25x25像素大小。并将它们合并为一张图片。


  1. input[type="radio"] + label:before, 
  2. input[type="checkbox"] + label:before { 
  3.     content:''; /* this is generated content*/
  4.     display: inline-block; /* make this fake elements inline block */
  5.     position:relative; /* we need to move the element without effecting the doc flow */
  6.     top:0.25em;  /* we're moving it slightly down for alignment purposes */
  7.     left:-2px; /* we're moving it slightly to the left */
  8.     width:25px; height:25px; /* the width and height of the fake elements */
  9.     background-image:url(formelements.png); /* the background image sprite */
  10. }
复制代码


现在，我们有了图片，但是还需要定位它们的位置。我们将使用sprites计算来定位每张图片的位置。


  1. input[type="checkbox"] + label:before { background-position: 0 -25px;} 
  2. input[type="checkbox"]:checked + label:before {background-position: 0 0 ; }
  3. input[type="radio"] + label:before { background-position: -25px -25px;} 
  4. input[type="radio"]:checked + label:before { background-position: -25px 0;}
复制代码


第二和第四行代码是说：如果input有a :checked伪类，就改变之前的label伪元素的背景图片的位置。这种方法只有使用之前的html结构才能实现。更多关于这方面的知识，可以查看这篇文章：Smashing Magazine article。


浏览器回退


我们的插件需要支持IE7-8，所以我们需要移除一些它们不支持样式，例如，IE8支持伪元素，但是不支持:checked伪类，这样我们的切换动作就不起作用了，IE7完全不支持这些伪元素。



  1. .ie8 label:before { display:none; content:none; /*this removes the fake content*/ }
  2. .ie8 input[type="checkbox"], 
  3. .ie8 input[type="radio"], 
  4. .ie7 input[type="checkbox"], 
  5. .ie7 input[type="radio"]{ position: static; left:0; /* this puts the inputs back in their place */
  6. }
复制代码


下拉列表框


下拉列表框可以在IE8+、FF、Webkit浏览器中正常工作。
制作下拉列表框最大的问题是下拉按钮。有许多方法可以渲染它们，到底我们要使用哪种方法来隐藏它们呢？我们使用的方法是，将select包装到以个div中，使select长度大于div，并隐藏div大于select部分（那里是下拉按钮）。然后在里面使用背景图片放置我们自己的下拉按钮。


HTML



  1. <div class="styled"> 
  2.   <select> 
  3.     <option>Explorer</option> 
  4.     <option>Firefox</option> 
  5.     <option>Webkit</option> 
  6.   </select> 
  7. </div>
复制代码


CSS样式


  1. div.styled { 
  2.     overflow:hidden; /* this hides the select's drop button */
  3.     padding:0; 
  4.     margin:0; 
  5.     background: white url(formelements-select.png) no-repeat bottom right; 
  6.     /* this is the new drop button, in image form */
  7.     width:12em; border-radius:2px; 
  8.     box-shadow: 0 1px 3px rgba(0,0,0,0.2); 
  9.     border: solid 1px #ccc; 
  10. }
复制代码


下面是移除select框中的样式：


  1. div.styled select { 
  2.     width:115% /* this percentage effectively extends the drop down button out of view */; 
  3.     background-color:transparent /* this hides the select's background making any styling visible from the div */; 
  4.     background-image:none; 
  5.     -webkit-appearance: none /* this is required for Webkit browsers */; 
  6.     border:none; 
  7.     box-shadow:none; 
  8.     padding:0.3em 0.5em; /* padding should be added to the select, not the div */
  9. }
复制代码


这个方法在IE7中不起作用。所以需要给IE7浏览器一些回退代码：


  1. .ie7 div.styled {border:none; }
  2. .ie7 div.styled select { 
  3.     width:100%; 
  4.     background-color:white; 
  5.     border: solid 1px #ccc; 
  6.     padding:0.3em 0.5em; 
  7. }
复制代码


文件选择框


文件选择框只在webkit内核的浏览器上工作。这里，我们使用一个自定义按钮，通过伪元素将它放在原来按钮的上面。


HTML



  1. <input type="file" />
复制代码


CSS样式


  1. input[type="file"] { 
  2.     position: relative /* this needs to be in place for the pseudo element to position properly */; 
  3.     -webkit-appearance: none /* this is the key to clearing the default styling */; 
  4.     width: 40%; 
  5.     padding:0; 
  6.     background-color: #f5f5f5; 
  7.     box-shadow: inset 0 2px 3px rgba(0,0,0,0.2); 
  8.     border:solid 1px #ccc; 
  9. }
复制代码


下面的样式是移除原来的按钮：


  1. input[type=file]::-webkit-file-upload-button { 
  2.     width: 0; 
  3.     padding: 0; 
  4.     margin: 0; 
  5.     -webkit-appearance: none; 
  6.     border: none; 
  7. }
复制代码


下面的样式是自定义按钮的样式：


  1. input[type="file"]:after { 
  2.     content: ‘Upload File'; 
  3.     margin:0 0 0 0.5em; 
  4.     display: inline-block; left: 100%; position: relative; 
  5.     background: white url(formelements-select.png) no-repeat center left; 
  6.     padding:0.3em 0.5em; 
  7.     border: solid 1px #ccc; 
  8.     -webkit-appearance: none; 
  9.     box-shadow: 0 1px 3px rgba(0,0,0,0.2); 
  10. }
复制代码


文本域和按钮


文本域和按钮的美化效果所有浏览器都支持。当然，IE8不支持阴影效果。


HTML



  1. <input type="text" placeholder="Enter some text here" /><br/> 
  2. <textarea placeholder="Enter some words here" ></textarea><br/> 
  3. <input type="button" value="« Previous"> <input type="submit" value="Send »">
复制代码


CSS样式


下面是文本域的和 text input的样式：



  1. input[type="text"], textarea { 
  2.     width:12em; 
  3.     border-radius:2px; 
  4.     border: solid 1px #ccc; 
  5.     padding:0.4em; 
  6.     background-color: #f5f5f5; 
  7.     box-shadow: inset 0 2px 3px rgba(0,0,0,0.2); 
  8. }
复制代码


HTML5的表单可以使用新的type属性，使用最多的是：tel、eamil和number属性。可以像text属性一样使用CSS选择器来选择它们：


  1. input[type="tel"], 
  2. input[type="email"], 
  3. input[type="number"] {
  4.    Your styles here... 
  5. }
复制代码


下面是提交按钮的美化样式：


  1. input[type="submit"], input[type="button"] { 
  2.     background: white url(formelements-select.png) no-repeat center left; 
  3.     box-shadow: 0 1px 3px rgba(0,0,0,0.2); 
  4.     border-radius:4px; 
  5.     border: solid 1px #ccc; 
  6.     padding:0.3em 0.5em; 
  7. }
复制代码


注意，对于使用新的CSS3属性，记得添加各个厂商的前缀。
响应式设计
要使这些表单元素都具有响应式的特性，首先需要在头部添加以下的代码：



  1. <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"/>
复制代码


CSS样式


可以通过media queries媒体查询来使表单元素适应各种不同尺寸的屏幕。



  1. @media screen and (max-width: 600px) {
  2.     body { width:80%; font-size:15px; } 
  3. }/* end of query */
  4. @media screen and (max-width: 400px) {
  5.     input[type="text"], select, div.styled { width:100% } 
  6. }/* end of query */
复制代码


via:http://www.htmleaf.com/html5/html5muban/201501051107.html

html5和css3表单样式美化插件.zip

9.32 KB, 下载次数: 14

natalie86
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
typecho图片插件_Ideal ——接近Typecho完美的插件
weixin_32401411的博客
02-04 2280
说明：有的时候需要给博客添加一个一个特效什么，难道只能修改主题源代码吗？这样也太讽刺了。而且主题每次更新功能，虽然没必要更新。如果要更新，恐怕还得坐着在电脑面前我改了什么，哦，我改了头部。咦？我不只是改了头部吗，这特么啥情况？？样式怎么匹配不上了，我勒个擦擦！！删除了，容我好好想想；这里... 还有这里...(一个小时过去)结果【Database Server Error】插件简介Ideal史前,...
HTML5 + CSS3 3 表单
weixin_42069386的博客
10-07 716
一.表单 表单： 是搜集用户数据信息的各种表单元素的集合区域 作用：实现网页上的数据交互 搜集客户端输入的数据信息，提交到网站服务器端进行处理 常见应用： 注册/登录 搜索 留言/评论 文件上传/文章编辑 结构：表单区域 + 表单控件（表单元素） 表单标签：&lt;form&gt;&lt;/form&gt; 块状元素 用来定义网页中的交互输入的区域（表单区） 所有的表单控件必...
超赞！只需几步，打造高颜值的CSS表单！（附代码）
最新发布
u013179804的博客
04-29 1286
今天，我们来用 CSS 美化一下表单元素，它几乎可使用绝大多数 CSS 属性进行样式设计。OK，那来一起看看吧。
雨滴桌面插件大全_电脑技巧之桌面美化，字体美化，透明效果全都有
weixin_39641231的博客
12-19 5242
Windows技巧：桌面美化篇电脑的日常使用中，相信百分之九十九的玩家的电脑显示得最多的不是游戏也不是办公软件，而是桌面，一个干净整洁甚至是漂亮的桌面能够大幅度提高电脑日常使用的幸福感，今天我就来分享一下电脑的桌面美化软件。1：字体美化绝大部分电脑用户使用电脑都会忽略字体的美化，更加专注桌面图标壁纸任务栏等方面的美化，其实一个好看的字体也能极大提升电脑日常使用的美感，减缓眼睛的疲劳，今天就推荐一个...
Typecho后台美化插件 TypechoOneAdmin
源码下载
05-06 1755
简介： 插件是基于泽泽社长（qqdie）和 yn-zxj(github) 的purple 后台修改。完全免费开源。 提醒：虽然理论上不会对您的文件产生任何影响，但是还是建议您备份 typehco 根目录的admin 目录，以防止typecho版本带来的影响，插件支持登录样式修改以及后台样式修改。 网盘下载地址： http://kekewangLuo.net/crZ51jcOYX50 图片： ...
html5表单的css修饰,使用HTML5和CSS3美化表单
weixin_42528191的博客
06-14 415
bodymargin:0px;padding:0px;font:14px/21px "Lucida Sans","Lucida Grande","Lucida Sans Unicode",sans-serif;}.contact_form h2,.contact_form label{font-family:Georgia,Times,"Times New Roman",serif;}.form_...
html5和css3表单必填字段美化效果
12-13
在本主题“html5和css3表单必填字段美化效果”中，我们将深入探讨如何利用这两者来优化和美化网页表单中的必填字段。 首先，HTML5在表单元素上引入了新的属性，如`required`，用于标识某个字段为必填。当用户尝试...
jQuery和CSS3超炫联系方式表单美化插件
12-11
这是一款效果非常精美炫酷的jQuery和CSS3联系方式表单美化插件。大多数网站上都有让用户填写的联系方式表单，一个设计良好的表单能够大大的提升用户的体验度。该表单美化插件在原生HTML表单的基础上进行加工，并使用...
HTML5超酷响应式表单美化模板插件
12-12
在本资源中，“HTML5超酷响应式表单美化模板插件”正是利用了这些新特性，尤其是表单验证和响应式设计，来提升用户交互体验。 表单是网页中不可或缺的一部分，用于收集用户输入数据。HTML5为表单添加了新的验证属性...
mi_HTML5_CSS3源码_
09-29
开发者可能利用了上述提到的HTML5新特性来构建页面结构和功能，而CSS3则用于美化界面和实现响应式设计。通过分析这些源码，我们可以学习到如何将HTML5和CSS3结合，创建出具有现代感和互动性的网页。
表单美化之textarea文本域背景的美化.rar
07-05
表单美化之textarea文本域背景的美化
html5 css3在线留言表单美化代码
11-05
html5 css3在线留言表单美化代码
HTML5+CSS3实现的表单美化带输入验证特效源码
08-28
html5+css3实现的表单美化效果，以及具有输入验证特效，此种特效在网站非常实用，需要此段代码的朋友们可以前来下载使用。
Form 表单详解：案例、CSS 美化
甜心森的博客
10-19 3766
HTML 表单详解，HTML input 元素性质讲解，input CSS美化，input 伪类选择器，input radio 细致讲解，input radio 实现 Tab 选项卡。
表单页面美化（html、css）
m0_53898287的博客
12-13 1422
【代码】表单页面美化（html、css）
【HTML/CSS】表单美化
~★sunshine☆的博客专栏
09-21 6657
表单美化单选按钮 表单美化单选按钮 *{padding:0;margin:0;} .type{width:400px;height:32px;border:1px solid #0F0;margin:30px auto;} .type a{text-decoration:none;color:#666;} body{font:12px/22px 微软雅黑;} .type dl{hei
使用HTML5和CSS3美化表单
小菜鸟笔记
09-19 2179
body margin:0px; padding:0px; font:14px/21px "Lucida Sans","Lucida Grande","Lucida Sans Unicode",sans-serif; } .contact_form h2,.contact_form label{font-family:Georgia,Times,"Times N
列表表格及表单美化
jinqianwang的博客
05-17 2084
字体样式的设置，属性有：font-family      设置字体类型    隶书font-size          设置字体大小    12pxfont-style        设置字体风格     italicfont-wieght     设置字体的粗细      bold还可以将4中属性一起写入一个font中，不过要按照：字体风格----&gt;字体粗细----&gt;字体大小----...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值