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

Answer 5

如果我理解你的问题，这应该解决它：

http://jsfiddle.net/wvk2mnsf/

HTML - 创建一个简单的输入字段。

<input type="text" id="giraffe" />

CSS - 清除原生轮廓，以便您可以设置自己的轮廓，并且使用蓝红色轮廓看起来并不奇怪。

input:focus {
    outline: none;
}
.error-input-border {
    border: 1px solid #FF0000;
}

JS - 在字段中键入设置CSS中声明的红色边框类

document.getElementById('giraffe').oninput = function() { this.classList.add('error-input-border'); }

这也有很多关于最新标准的信息：https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/Data_form_validation

Answer 6

border-color：transparent; 边框：1px纯红色;

默认输入样式的边框颜色

6 个答案: