Contact Form 7 Highlight Fields (NotValidTip)

My changes allow for highlighting fields rather than overlaying error messages for inputs.

Change:

$.fn.wpcf7NotValidTip = function(message) {
		return this.each(function() {
			var into = $(this);
			into.append('<span class="wpcf7-not-valid-tip">' + message + '</span>');
			$('span.wpcf7-not-valid-tip').mouseover(function() {
				$(this).fadeOut('fast');
			});
			into.find(':input').mouseover(function() {
				into.find('.wpcf7-not-valid-tip').not(':hidden').fadeOut('fast');
			});
			into.find(':input').focus(function() {
				into.find('.wpcf7-not-valid-tip').not(':hidden').fadeOut('fast');
			});
		});
	};

To:

$.fn.wpcf7NotValidTip = function(message) {
		return this.each(function() {
			var into = $(this);

			$theParent = into.parent("span");
			$parentInp = $theParent.parent("input");

			into.find(':input').css('border-color', '#ff0000');

			into.find(':input').mouseover(function() {
				into.find(':input').css('border-color','#cccccc');
			});
			into.find(':input').focus(function() {
				into.find(':input').css('border-color','#cccccc');
			});
		});
	};

Now when a field is validated the input border changes colour (error red) which you can change easily for your own use. Let me know if it works for you.