JS控制输入框外边框focus后变红

JS控制输入框以红色作为验证提示，遇到两个问题：

1. select标签和input标签有区别
2. focus后变红再恢复时，不好恢复到之前的带有阴影的蓝边框

解决方案：

1. 第一种写法

function focusChangeBorder( id ) {
    var editElem = $("#" + id);
    if (editElem.children("#" + id).length>0) {
        editElem = editElem.children("#" + id);
    }
    editElem.blur(function () {
        $(this).css({
            'outline': '5px auto -webkit-focus-ring-color',
            'border-color': 'rgba(82, 168, 236, 0.8)'
        });
        $(this).css({
            'outline': 'none',
            'border-color': '#ccc'
        });           
    }).focus(function () {
        $(this).css({
            'outline': 'none',
            'border-color': 'rgba(255, 0, 0, 0.8)'
        });
    });
    editElem.focus();
}

1. 第二种写法

var focusChangeBorder = function ( id ) {
    //var elem = $( "input#" + id );
    //if (elem.length <= 0) {
    //    elem = $("#" + id);
    //}
    var elem = $( "input,select,option,textarea" ).filter( '#' + id );
    
    elem.blur( function () {
        elem.focus( function () {
            $( this ).css( {
                'outline': '5px auto -webkit-focus-ring-color',
                'border-color': 'rgba(82, 168, 236, 0.8)'
            } );
        } );
        $( this ).css( {
            'outline': 'none',
            'border-color': '#ccc'
        } );
    } ).focus( function () {
        $( this ).css( {
            'outline': 'none',
            'border-color': 'rgba(255, 0, 0, 0.8)'
        } );
    } );
    elem.focus();
}