边框颜色

Question

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

我有默认风格的输入字段（无CSS添加，只是宽/高/填充），但现在我想给它一个红色边框（错误样式）。我怎样才能做到这一点？只需设置边框将删除输入的默认样式，只设置边框颜色看起来很奇怪，在某些情况下设置大纲会起作用（并且在Firefox中看起来不太好）。

任何提示？

编辑：来吧家伙们在回答之前阅读问题。 我想让浏览器默认外观，我只想给它一个红色的边框。

Answer 1

我原以为这已经被回答了 - 但是肯定你想要的是这样的： box-shadow：0 0 3px＃CC0000;

例子： http://jsfiddle.net/vmzLW/

Answer 2

什么其实错：

input { border: 1px solid #f00; } 

你只希望它有错误的投入？在这种情况下，为输入一类错误的...

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

Answer 3

您可以通过使用addClass（）方法

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

使用jquery此

更新： 您可以删除在错误类使用

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

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

Answer 4

如果我明白你的问题正确这应该解决这个问题：

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 5

如果它是一个角度应用你可以简单地做到这一点

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

Answer 6

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