Skip to content

Instantly share code, notes, and snippets.

@yaowenqiang

yaowenqiang/dabblet.css

Forked from LeaVerou/dabblet.css
Created December 17, 2011 07:11
Show Gist options
  • Save yaowenqiang/1489540 to your computer and use it in GitHub Desktop.
Save yaowenqiang/1489540 to your computer and use it in GitHub Desktop.
Download ZIP
Untitled
Raw
dabblet.css
input[type=email]:focus:valid{background:pink;}
input[type=email]:valid{background:yellow;}
input[type=email]:focus:invalid{background:#ccf;}
::-webkit-validation-bubble-message {
color: #eee;
background: #000;
border-color: #444;
-webkit-box-shadow: 4px 4px 4px rgba(100,100,100,0.5);
-webkit-animation-timing-function: ease;
-webkit-animation: bounce 0.45s 1;
}
::-webkit-validation-bubble-message:before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
margin-right: 4px;
background: url(http://trac.webkit.org/export/90202/trunk/Source/WebCore/inspector/front-end/Images/errorMediumIcon.png)
}
::-webkit-validation-bubble-arrow {
background: #000;
border-color: #444;
-webkit-box-shadow: 0 0 0 0;
}
Raw
dabblet.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html5 form demo</title>
</head>
<body>
<form method="post" accept-charset="utf-8">
<input type="email" name="email" x-moz-errormessage='wrong email' value='myemail' onchange="if(this.value =='') setCustomValidity('邮箱必须填写！'); else setCustomValidity('')" id="email" />
<input type="submit" name="" value="value" />
</form>
</body>
</html>
Raw
settings.json
{"page":"result","view":"separate"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment