Posted By

KF on 09/21/09


Tagged


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

KF
koyotebr


jQuery Form Highliting


 / Published in: jQuery
 

URL: http://papermashup.com/jquery-form-highlighting/

  1. <script type="text/javascript">
  2. $(document).ready(function(){
  3. $('input').focus(function() {
  4. $(this)
  5. .parent().addClass('highlight')
  6. });
  7.  
  8. $('input').blur(function(){
  9. $(this)
  10. .parent().removeClass('highlight')
  11. });
  12.  
  13. });
  14. </script>
  15. <style type="text/css">
  16. .input {
  17. padding:6px;
  18. width:315px;
  19. border: 1px solid #fff;
  20. }
  21. input {
  22. border:4px solid #666;
  23. padding:4px;
  24. width:300px;
  25. }
  26. .highlight {
  27. background-color:#FF6;
  28. border: 1px solid #FC6;
  29. }
  30.  
  31.  
  32. </style>
  33.  
  34. <div class='input'> Name:<br/>
  35. <input name='Name' type='text'/>
  36. </div>
  37. <div class='input'> Email:<br/>
  38. <input name='Email' type='text'/>
  39. </div>
  40. <div class='input'> Town:<br/>
  41. <input name='Email' type='text'/>
  42. </div>

Report this snippet  

You need to login to post a comment.