html5输入框状态样式,HTML5 新颖的输入框验证界面设计

CSS

语言：

CSSSCSS

确定

@import url(http://fonts.googleapis.com/css?family=Lato);

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {

margin: 0;

padding: 0;

border: 0;

font: inherit;

font-size: 100%;

vertical-align: baseline; }

html {

line-height: 1; }

ol, ul {

list-style: none; }

table {

border-collapse: collapse;

border-spacing: 0; }

caption, th, td {

text-align: left;

font-weight: normal;

vertical-align: middle; }

q, blockquote {

quotes: none; }

q:before, q:after, blockquote:before, blockquote:after {

content: "";

content: none; }

a img {

border: none; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {

display: block; }

body {

background: #f1f1f1;

font-family: "Lato", sans-serif;

color: #333;

line-height: 1.4;

font-size: 16px; }

* {

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

box-sizing: border-box; }

.wrap {

width: 550px;

margin: 0 auto;

margin-top: 100px;

padding: 30px;

background: #eee;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

border-radius: 5px; }

.cb {

clear: both; }

h1 {

margin-bottom: 30px;

font-size: 2rem;

text-transform: uppercase;

font-weight: bold; }

h1 em {

font-size: 0.8rem;

text-transform: none;

font-weight: normal; }

label {

display: block;

width: 100%; }

input {

width: 100%;

display: block;

padding: 8px;

margin-bottom: 10px;

font-size: 1.1rem;

outline: none;

border: 1px solid #d3d3d3;

-moz-transition-duration: 0.3s;

-o-transition-duration: 0.3s;

-webkit-transition-duration: 0.3s;

transition-duration: 0.3s; }

input:focus {

border-color: #aaa;

-moz-box-shadow: 0px 0px 5px 0px #aaa;

-webkit-box-shadow: 0px 0px 5px 0px #aaa;

box-shadow: 0px 0px 5px 0px #aaa; }

input.valid {

border-color: #4e59e4;

-moz-box-shadow: 0px 0px 5px 0px #4e59e4;

-webkit-box-shadow: 0px 0px 5px 0px #4e59e4;

box-shadow: 0px 0px 5px 0px #4e59e4; }

input[type="submit"] {

text-transform: uppercase;

cursor: pointer;

width: auto;

float: right;

background: #4e59e4;

border: 1px solid #1b26b1;

color: #fff;

padding: 10px 20px;

line-height: 1;

-moz-transition-duration: 0.3s;

-o-transition-duration: 0.3s;

-webkit-transition-duration: 0.3s;

transition-duration: 0.3s; }

input[type="submit"]:hover {

-moz-box-shadow: 0px 0px 10px 0px #4e59e4;

-webkit-box-shadow: 0px 0px 10px 0px #4e59e4;

box-shadow: 0px 0px 10px 0px #4e59e4; }

.messages_required {

margin-top: 30px; }

.msg {

font-size: 0.9rem;

margin-bottom: 10px;

line-height: 1;

color: #aaa;

-moz-transition-duration: 0.3s;

-o-transition-duration: 0.3s;

-webkit-transition-duration: 0.3s;

transition-duration: 0.3s; }

.msg:before {

content: "";

display: inline-block;

vertical-align: middle;

width: 10px;

height: 10px;

-moz-border-radius: 50%;

-webkit-border-radius: 50%;

border-radius: 50%;

background: #d3d3d3;

margin-right: 5px;

-moz-transition-duration: 0.3s;

-o-transition-duration: 0.3s;

-webkit-transition-duration: 0.3s;

transition-duration: 0.3s; }

.msg.valid {

color: #4e59e4; }

.msg.valid:before {

background: #7a82eb; }