边框颜色

这里是一个棘手的问题...边框颜色

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

任何提示？

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

来源

2011-05-17 tbleckert

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

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

来源

2012-04-03 09:31:54 mattbee

您可能还想使用'：invalid'伪选择器。 – user007 2017-06-22 06:55:00

什么其实错：

input { border: 1px solid #f00; }

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

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

来源

2011-05-17 11:13:29

这将覆盖输入字段的默认样式，例如chrome具有内部阴影等。 – tbleckert 2011-05-17 11:21:34

您应该使用重置css文件 - 样式输入您想要的样式，并在需要时添加边框。不同的浏览器会做不同的事情，所以不要太担心插入的影子 - 有些浏览器甚至不会那样做！ – 2011-05-17 11:27:01

我想浏览器默认输入，输入应该看起来像浏览器想要的方式，我只是想添加一个边框。 – tbleckert 2011-05-17 11:30:53

您可以通过使用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类

来源

2011-05-17 11:14:17 KillerFish

正如Ian Wood所说：这将覆盖输入字段的默认样式，例如chrome有一个内部阴影等。 – tbleckert 2011-05-17 11:21:51

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

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

来源

2015-07-17 04:37:28

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

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

来源

2016-08-21 13:33:06

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

来源

2017-08-19 03:30:41

回答

相关问题