css中对input 的focus的border修改的问题

Question

css中对input 的focus的border修改

代码如下：

.MenuTab tr input[type=text]:focus { 
    outline: 2px solid #4472C4;
    border:none;
}

效果图：

我的问题：
outline: 2px solid #4472C4;
border:none;
这2行都是可以实现的，包括border-color也是可以实现的
但是为什么
border: 1px red;这个就不行，请懂的人解答一下，非常感谢！

Answer 1

boder 和 outline 不是一个东西 。 你这样就能看到 boder 边框了

 input[type=text]:focus { 
    /* outline: 2px solid red;
    border:none; */
    border: 10px solid red;
}

所以 这样写 也可以实现 。但是 我觉得前者 更好 。 不是看不到 是 outline的线和border重合了

    input[type=text]:focus { 
    /* outline: 2px solid red;
    border:none; */
    border: 2px solid red;
    outline: none;
}