css3写的实用表单美化

<!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写的实用表单美化的更多相关文章

jQuery和CSS3超酷表单美化插件
这是一款效果很精美炫酷的jQuery和CSS3联系方式表单美化插件.大多数站点上都有让用户填写的联系方式表单,一个设计良好的表单可以大大的提升用户的体验度.该表单美化插件在原生HTML表单的基础上进 ...
HTML5表单验证（4个实用的表单美化案例）
multipart/form-data 在使用包含文件上传控件的表单时,必须使用autocomplete="on" 自动补全功能novalidate 不验证 <form en ...
推荐几款很棒的 JavaScript 表单美化和验证插件
表单元素让人爱恨交加.作为网页最重要的组成部分,表单几乎无处不在,从简单的邮件订阅.登陆注册到复杂的需要多页填写的信息提交功能,表单都让开发者花费了大量的时间和精力去处理,以期实现好用又漂亮的表单功能 ...
我为什么还要造轮子？欠踹？Monk.UI表单美化插件诞生记！
背景目前市场上有很多表单美化的UI,做的都挺不错,但是他们都有一个共同点,那就是90%以上都是前端工程师开发的,导致我们引入这些UI的时候,很难和程序绑定.所以作为程序员的我,下了一个决定!我要自己 ...
HTML5——表单美化
闲聊: 今天小颖在跟着慕课网学习:表单美化看完了自己跟着敲了敲,顺便做个笔记嘻嘻,好记性不如烂笔头,脑子记不住,就写成笔记,以后也方便查看,嘻嘻. 正文: 1.表单美化_单选按钮篇 2.表单美化_复 ...
jQuery星级评论表单美化代码
最近正在做php第二阶段的项目,由于我们小组做的是游戏评论网站,所以需要用到评分评论的页面,这里我做了个星级评论表单 1.首先,我们需要引入一个jQuery文件,代码如下: /*! * jQuery ...
BootStrapt iCheck表单美化插件使用方法详解（含参数、事件等）全选反选
特色: 1.在不同浏览器(包括ie6+)和设备上都有相同的表现 — 包括桌面和移动设备 2.支持触摸设备 — iOS.Android.BlackBerry.Windows Phone等系统 4.方便 ...
iCheck表单美化插件使用方法详解（含参数、事件等）
iCheck 特色: 1.在不同浏览器(包括ie6+)和设备上都有相同的表现 - 包括桌面和移动设备 2.支持触摸设备 - iOS.Android.BlackBerry.Windows Phon ...
JavaScript/jQuery 表单美化插件小结
Niceforms Niceforms是一款独立的表单美化工具,当前版本为2.0 官方主页:http://www.emblematiq.com/lab/niceforms/ 官方演示:http://w ...

随机推荐

(转)这个API很“迷人”——新的Fetch API
原文:https://hacks.mozilla.org/2015/03/this-api-is-so-fetching 原标题是This API is So Fetching,Fetching也可以 ...
MVC 為頁面的list資料重新命名
function ReBookFileName() { $("#div_sortable").find("li[ ...
ASP.NET中调用存储过程方法
两种不同的存储过程调用方法为了突出新方法的优点,首先介绍一下在.NET中调用存储过程的“官方”方法.另外,本文的所有示例程序均工作于SqlServer数据库上,其它情况类似,以后不再一一说明.本文所 ...
c# & Fizzler to crawl web page in a certain website domain
使用fizzler [HtmlAgilityPackExtension]和c#进行网页数据提取:fizzler是HtmlAgilityPack的一个扩展,支持jQuery Selector: 提取数据 ...
python json学习之路1-认识json格式数据
JSON 语法规则 JSON 语法是 JavaScript 对象表示语法的子集. 数据在键值对中数据由逗号分隔花括号保存对象方括号保存数组JSONJSON 名称/值对 JSON 数据的书写格式是 ...
用jsch.jar实现SFTP上传下载删除
java类: 需要引用的jar: jsch-0.1.53.jar 关于jsch有篇文章关于目录的问题写得非常好:http://www.zzzyk.com/show/9f02969327434a6c.h ...
Intellij_idea-14官方快捷键中文版
编辑类: Ctrl+Space 基本代码实例(类.方法.变量) Ctrl + Shift + Space 智能代码实例(根据需要的类型过滤方法和变量) Ctrl + Shift + Enter 完整的 ...
Sublime 保存时自动转换tab成空格
笔者最近学习c, c语言的清新代码风格让人眼前一亮,不禁爱上这种写作风格,变量名.等号.常量值之间空格分隔,清爽便于阅读. 于是笔者以此为代码写作规范,查阅自己以前写的java代码,以下用notepa ...
sqlite query用法
本文转自http://blog.csdn.net/double2hao/article/details/50281273,在此感谢作者 query(table, columns, selection, ...
Verilog之串口(UART)通信
0:起始位,低电平:1~8:数据位:9:校验位,高电平:10:停止位,高电平. 波特率 “9600bps”表示每秒可以传输9600位. 波特率定时计数器由时钟频率除以波特率. 采集1~8位,忽略0.9 ...

css3写的实用表单美化

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

随机推荐

热门专题