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;
}

Here's the fiddle

修改：

问题似乎与mozilla firefox一样，因为Chrome正在工作！

Answer 1

试试这个

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

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

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

1 个答案: