点击输入框变色

//html

<div class="row-input">

<span class="lab">邮箱：</span>

<input type="text" class="text text-input-before" name="contact" placeholder="请输入您的邮箱">
<span class="msg-box n-right" style="display: none;" for="contact"></span>

</div>

//css

.row-input .text-input-before{

border: 1px solid #d7d7d7;

}

.row-input .text-input-after{

border: 1px solid #2277e6;

}

//jquery

$('.text').on('click',function(e){

e.preventDefault();

var $this = $(this),

$parent = $this.closest('.row-input');

$this.addClass('text-input-after').removeClass('text-input-before');

$parent.siblings().find('.text').addClass('text-input-before').removeClass('text-input-after');

});