jpcatherine
New Member
I'm trying to create something similar to a bootstrap input. When the user clicks on the input it will play a nice transition and glow. I got all the styling down but the transition is showing up wierd but all the other sites animate it correctly. My box shadow shows up very fast then dims down but here at This link Everything is working correctly, but here at \[code\]http://67.184.73.19/Website/Login/\[/code\] Its animating it differently than the link before this. I Have some code below.CSS Input\[code\].Field {-webkit-transition: all 0.30s ease-in-out;-moz-transition: all 0.30s ease-in-out;-ms-transition: all 0.30s ease-in-out;-o-transition: all 0.30s ease-in-out;min-height:34px;padding:7px 8px;outline:none;color:#333;background-color:#fff;background-repeat:no-repeat;background-position:right center;border:1px solid #ccc;border-radius:3px;box-shadow:inset 0 1px 2px rgba(0,0,0,0.075);-moz-box-sizing:border-box;box-sizing:border-box;vertical-align:middle; }.Field:focus {box-shadow:0 0 10px rgba(0,153,255,.75);border:1px solid #09F;}\[/code\]By the way im using the latest version of Google Chrome.