Advanced Search

jQuery Form Highliting

/ Published in: jQuery
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  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>

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.