默认输入样式的边框颜色

Question

这是一个棘手的问题......

我有默认的样式输入字段(没有添加CSS,只有宽度/高度/填充),但现在我想给它一个红色边框(错误样式).我怎样才能做到这一点？只是设置边框将删除输入的默认样式,设置只有border-color看起来很奇怪,设置轮廓在某些情况下会起作用(并且在Firefox中看起来不那么好).

有小费吗？

编辑:来吧,伙计们在回答之前阅读了这个问题.我想要浏览器默认的输入外观,我只想给它一个红色边框.

Answer 1

我本来以为这本来已经回答了 - 但你肯定要的是这个:box-shadow:0 0 3px#CC0000;

示例:http: //jsfiddle.net/vmzLW/

Answer 2

您可以通过使用addClass()方法为此使用jquery

CSS

 .defaultInput
    {
     width: 100px;
     height:25px;
     padding: 5px;
    }

.error
{
 border:1px solid red;
}

<input type="text" class="defaultInput"/>

Jquery代码

$(document).ready({
  $('.defaultInput').focus(function(){
       $(this).addClass('error');
  });
});

更新: 您可以使用删除该错误类

$('.defaultInput').removeClass('error');

它不会删除该默认样式.它只会删除.error类

Answer 3

实际有什么问题：

input { border: 1px solid #f00; }

您只希望输入错误的内容吗？在这种情况下，给输入一个错误类别...

input.error { border: 1px solid #f00; }

Answer 4

如果是Angular应用程序，则只需执行此操作

input.ng-invalid.ng-touched
{
    border: 1px solid red !important; 
}