点击输入框变色

本文主要是介绍点击输入框变色，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

//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');
});

这篇关于点击输入框变色的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---