CSS 中的文本框样式在留空且失去焦点时返回完整边框

Question

在文本框中键入一些字符后将其删除然后移动光标（失去焦点），文本框将有一个完整的红色阴影边框。如何删除它，使其仅具有红色的底部边框，就像第一个条件一样？

CSS代码 ：

[type='text']:invalid{
    padding             : 5px 10px 5px 10px;
    width               : 100px;
    border              : none;
    border-bottom       : 2px solid red;
    transition          : all 0.2s ease;
    -webkit-transition  : all 0.2s ease;
    -moz-transition     : all 0.2s ease;
    -o-transition       : all 0.2s ease;
}
[type='text']:valid {
    padding             : 5px 10px 5px 10px;
    width               : 100px;
    border              : none;
    border-bottom       : 2px solid green;
    transition          : all 0.2s ease;
    -webkit-transition  : all 0.2s ease;
    -moz-transition     : all 0.2s ease;
    -o-transition       : all 0.2s ease;
}

这是小提琴

编辑：

问题似乎与 Mozilla 火狐有关，因为 chrome 正在正常工作！！

Answer 1

试试这个

input[type='text']
{
   box-shadow: none;
}

http://jsfiddle.net/m01sknz8/1/