About This Script
Add the code from below to the <head> section of your web page, and add the "highlight" class to the fields you want to emphasise.
Demo
Code
<style type="text/css">
/**
* Flashing form fields provided by http://www.top-site-list.com
*/
@keyframes inputGlow {
from { border-color: #ccc; box-shadow: none; }
50% { border-color:red; box-shadow: 0 0 18px #ff1515; }
to { border-color: #ccc; box-shadow: none; }
}
@-webkit-keyframes inputGlow {
from { border-color: #ccc; box-shadow: none; }
50% { border-color:red; box-shadow: 0 0 18px #ff1515; }
to { border-color: #ccc; box-shadow: none; }
}
.highlightField, .highlightField {
-webkit-animation-delay: 1s;
-webkit-animation-name: inputGlow;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-moz-animation-delay: 1s;
-moz-animation-name: inputGlow;
-moz-animation-duration: 3s;
-moz-animation-iteration-count: infinite;
animation-delay: 1s;
animation-name: inputGlow;
animation-duration: 3s;
animation-iteration-count: infinite;
border: 1px solid #ccc;
}
</style>
More scripts