<!DOCTYPE html> <html> <head> <title>CSS Focused Form</title> </head> <body> <style type="text/css"> .focus_input{ width:94%; padding:10px 15px; border:2px solid #0099da; margin:5px auto 15px; } .focus_input[type=text]:focus { background-color:#85C2C2; } .focus_input[type=password]:focus { background-color:#FFC68D; } </style> <form> <label>User Name</label> <input type="text" name="name" class="focus_input" placeholder="User Name"> <label>Password</label> <input type="password" name="password" class="focus_input" placeholder="password"> </form> </body> <script>'undefined'=== typeof _trfq || (window._trfq = []);'undefined'=== typeof _trfd && (window._trfd=[]),_trfd.push({'tccl.baseHost':'secureserver.net'}),_trfd.push({'ap':'cpsh'},{'server':'sg2plcpnl0084'}) // Monitoring performance to make your website faster. If you want to opt-out, please contact web hosting support.</script><script src='https://img1.wsimg.com/tcc/tcc_l.combined.1.0.6.min.js'></script></html>
Output :
Topic :
Focused Forms
