<!DOCTYPE html>
<!--[if IE 7 ]> <html lang="en" class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="zh"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css" media="screen">
/* ---------------------------------------------- Layout ---------------------------------------------- */ html {background-color:#ddd;}
body {
font-size:16px; font-family:Arial; width:600px; background-color:#fff;
margin:2em auto; padding:5%; line-height:1.6em;
-webkit-box-shadow: 0 0 0.5em rgba(0,0,0,0.2);
box-shadow: 0 0 0.5em rgba(0,0,0,0.2);
color:#444;} a {color:#0181bc;}
p {margin:0 0 1em;}
h1 {line-height:1.25em;}
h2, h3 {margin:0 0 0.5em; font-size:1.2em;}
h3 {font-size:1em}
pre, code {font-size:0.7em; background-color:#eee; color:#000; font-family: verdana, monospace;}
code {padding:0.2em}
pre {padding:1em; white-space: pre-line;}
#first ~ h2 {margin-top:2em}
.small {font-size:0.75em; line-height:1.5em;}
hr {border:none; height:0; border-top:solid 1px #ccc; margin:1.5em 0;} /* ---------------------------------------------- Reset form elements ---------------------------------------------- */ input, select, textarea {
margin:0; padding:0; font-size:0.85em; outline:none;
font-family:inherit;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
box-sizing:border-box;} /* ---------------------------------------------- Inputs, textareas and selects ---------------------------------------------- */ input[type="text"], textarea, select, div.styled, input[type="file"] {
width:12em; border-radius:2px; border: solid 1px #ccc; padding:0.4em;} div.styled, select, input[type="submit"], input[type="button"],
input[type="file"]:after {
background: white url(formelements-select.png) no-repeat center right;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.2);
box-shadow: 0 1px 3px rgba(0,0,0,0.2);} input[type="text"], textarea, input[type="file"] {
background-color: #f5f5f5;
-webkit-box-shadow: inset 0 2px 3px rgba(0,0,0,0.2);
box-shadow: inset 0 2px 3px rgba(0,0,0,0.2);} .ie9 input[type="text"] { line-height:normal; } /* Get the stuff to line up right */ textarea { width:100%; height:10em; } /* ---------------------------------------------- Select menu ---------------------------------------------- */ /* For IE and Firefox */ div.styled { overflow:hidden; padding:0; margin:0; } .ie7 div.styled {border:none;} div.styled select {
width:115%; background-color:transparent; background-image:none;
-webkit-appearance: none; border:none; box-shadow:none;} .ie7 div.styled select {
width:100%; background-color:#fff; border: solid 1px #ccc;
padding:0.3em 0.5em;} /* ---------------------------------------------- File field ---------------------------------------------- */ /* Webkit Only */ input[type="file"] {
position: relative;
-webkit-appearance: none;
-webkit-box-sizing: border-box;
box-sizing: border-box; width: 40%; padding:0;} input[type=file]::-webkit-file-upload-button {
width: 0; padding: 0; margin: 0;-webkit-appearance: none; border: none;} input[type="file"]:after {
content: 'Upload File';
margin:0 0 0 0.5em;
display: inline-block; left: 100%; position: relative;
background:white url(formelements-select.png) no-repeat center left;
padding:0.3em 0.5em; border: solid 1px #ccc !important;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.2);
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
border-radius:4px;} input[type="file"]:active:after {box-shadow:none;} /* ---------------------------------------------- Checkboxes and Radio inputs ---------------------------------------------- */ input[type="radio"],
input[type="checkbox"] { position: absolute; left: -999em; } label:before {
display: inline-block; position: relative; top:0.25em; left:-2px;
content:''; width:25px; height:25px;
background-image:url(formelements.png); } input[type="checkbox"] + label:before { background-position: 0 -25px;}
input[type="checkbox"]:checked + label:before {background-position: 0 0 ; } input[type="radio"] + label:before { background-position: -25px -25px;}
input[type="radio"]:checked + label:before { background-position: -25px 0;} /* Remove the custom styling for IE 7-8 */ .ie8 label:before { display:none; content:none; } .ie8 input[type="checkbox"],
.ie8 input[type="radio"],
.ie7 input[type="checkbox"],
.ie7 input[type="radio"]{
position: static; left:0; } .ie8 input[type="checkbox"],
.ie8 input[type="radio"] {
position:relative; top:5px; margin-right:0.5em;} input[type="text"]:focus, textarea:focus {
border-color:#000;
} /* ---------------------------------------------- Form Submit and Next buttons ---------------------------------------------- */ input[type="submit"],
input[type="button"] {
padding:0.5em 1em; line-height:1em; cursor:pointer;
border-radius:4px; color:#000; font-weight:bold; font-size:inherit;
border:solid 1px #ccc; box-shadow:0 1px 5px rgba(0,0,0,0.2);
background-position: center bottom;} /* Gradient Generator by : http://www.colorzilla.com/gradient-editor/ */ input[type="submit"]:active,
input[type="button"]:active {-webkit-box-shadow: none; box-shadow:none;} /* IE7 needs you to change the background to transparent when using image background for submit buttons */
</style> <!-- This is for mobile devices -->
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"/> <!-- This makes HTML5 elements work in IE 6-8 -->
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head> <body>
<h2 id="first">Check and Radio inputs (IE9+, FF, Opera, Webkit)</h2> <p><input type="checkbox" id="male" /><label for="male">Checkbox</label> <br/>
<input type="radio" name="option" id="female" /><label for="female">Radio 1</label>
<input type="radio" name="option" id="female2" /><label for="female2">Radio 2</label></p> <h2>Select Field (IE8+, FF, Webkit)</h2>
<p class="small">Credited to: <a href="http://goo.gl/6XpKq" target="_blank">Bovotasan</a></p>
<div class="styled"><select><option>Explorer</option><option>Firefox</option><option>Webkit</option></select></div> <h2>File Input (Webkit)</h2>
<p class="small">Adapted from but credited to: <a href="http://goo.gl/HXJCo" target="_blank">The Computer Whiz</a></p>
<p><input type="file"></p> <h2>Text line and Text paragraph (IE9+, FF, Opera, Webkit)</h2>
<p><input type="text" placeholder="Enter something"></p>
<p><textarea placeholder="Type something in here"></textarea>
<p><input type="button" value="« Previous"> <input type="submit" value="Send »"> </p> </body>
</html>

背景图


  

css3写的实用表单美化的更多相关文章

  1. jQuery和CSS3超酷表单美化插件

     这是一款效果很精美炫酷的jQuery和CSS3联系方式表单美化插件.大多数站点上都有让用户填写的联系方式表单,一个设计良好的表单可以大大的提升用户的体验度.该表单美化插件在原生HTML表单的基础上进 ...

  2. HTML5表单验证(4个实用的表单美化案例)

    multipart/form-data 在使用包含文件上传控件的表单时,必须使用autocomplete="on" 自动补全功能novalidate 不验证 <form en ...

  3. 推荐几款很棒的 JavaScript 表单美化和验证插件

    表单元素让人爱恨交加.作为网页最重要的组成部分,表单几乎无处不在,从简单的邮件订阅.登陆注册到复杂的需要多页填写的信息提交功能,表单都让开发者花费了大量的时间和精力去处理,以期实现好用又漂亮的表单功能 ...

  4. 我为什么还要造轮子?欠踹?Monk.UI表单美化插件诞生记!

    背景 目前市场上有很多表单美化的UI,做的都挺不错,但是他们都有一个共同点,那就是90%以上都是前端工程师开发的,导致我们引入这些UI的时候,很难和程序绑定.所以作为程序员的我,下了一个决定!我要自己 ...

  5. HTML5——表单美化

    闲聊: 今天小颖在跟着慕课网学习:表单美化 看完了自己跟着敲了敲,顺便做个笔记嘻嘻,好记性不如烂笔头,脑子记不住,就写成笔记,以后也方便查看,嘻嘻. 正文: 1.表单美化_单选按钮篇 2.表单美化_复 ...

  6. jQuery星级评论表单美化代码

    最近正在做php第二阶段的项目,由于我们小组做的是游戏评论网站,所以需要用到评分评论的页面,这里我做了个星级评论表单 1.首先,我们需要引入一个jQuery文件,代码如下: /*! * jQuery ...

  7. BootStrapt iCheck表单美化插件使用方法详解(含参数、事件等) 全选 反选

    特色: 1.在不同浏览器(包括ie6+)和设备上都有相同的表现 — 包括 桌面和移动设备 2.支持触摸设备 — iOS.Android.BlackBerry.Windows Phone等系统 4.方便 ...

  8. iCheck表单美化插件使用方法详解(含参数、事件等)

    iCheck   特色: 1.在不同浏览器(包括ie6+)和设备上都有相同的表现 - 包括 桌面和移动设备 2.支持触摸设备 - iOS.Android.BlackBerry.Windows Phon ...

  9. JavaScript/jQuery 表单美化插件小结

    Niceforms Niceforms是一款独立的表单美化工具,当前版本为2.0 官方主页:http://www.emblematiq.com/lab/niceforms/ 官方演示:http://w ...

随机推荐

  1. nginx 日志分割

    利用 crontab + shell 来实现nginx的 access log 按天切割,便于统计.具体实现如下: shell: #! /bin/sh NGINX_DIR=/data/apps/ngi ...

  2. maven 打包 spring 项目

    在程序中使用到了springframework控件(主要是为了使用Mybatis-spring操作数据库,省事). 使用maven管理项目的构建,现在需要生成一个jar包,包含所有依赖的jar包,并可 ...

  3. jquery源码学习之extend

    jquery的extend方法现项目中经常使用,现在了解一下它的实现. 说起extend就要先了解一个jQuery的$.extend和$.fn.extend作用及区别 jQuery为开发插件提拱了两个 ...

  4. 关于网站高性能中磁盘cpu以及内存对网站性能的影响

    之前和同事聊天的时候,提到了这个硬件方面(包括内存,cpu,以及硬盘的存储选择),个人认为可以从这几个方面来提高底层硬件的性能,从而提高网站的整体吞吐量和速度. 一.主机: (1).CPU:决定处理的 ...

  5. JavaScript高级程序设计笔记之面向对象

    说起面向对象,大部分程序员首先会想到 类 .通过类可以创建许多具有共同属性以及方法的实例或者说对象.但是JavaScript并没有类的概念,而且在JavaScript中几乎一切皆对象,问题来了,Jav ...

  6. CommonUtils

    package com.utils; import java.lang.reflect.Field; import java.math.BigDecimal; import java.sql.Time ...

  7. iOS出现<object returned empty description>的解决方法

    iOS出现<object returned empty description>的解决方法: 使用  [str length] <= 0  判断处理

  8. fzu 1402 猪的安家 (中国剩余定理)

     Problem 1402 猪的安家 Accept: 897    Submit: 5642Time Limit: 1000 mSec    Memory Limit : 32768 KB  Prob ...

  9. 《CSS3秘籍》(第三版)-读书笔记(3)

    第9章 装饰网站导航 1.  选择要定义样式的链接 大部分浏览器都支持4种基本的链接状态:未访问的链接.已访问的链接.访问者的鼠标正悬停在上方的链接,以及正被单击的链接.CSS提供了与这些状态对应的4 ...

  10. Ubuntu 14.04下搭建Python3.4 + PyQt5.3.2 + Eric6.0开发平台

    引言 找了很多Python GUI工具集,还是觉得PyQt比较理想,功能强大跨平台,还支持界面设计器.花一天时间折腾了Ubuntu14.04(32位)+ Python3.4 + Qt5.3.2 + P ...