CSS 默认输入样式的边框颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6029945/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Border color on default input style
提问by tbleckert
here's a tricky question...
这是一个棘手的问题...
I have default styled input fields (no css added, just width/height/padding), but now I want to give it a red border (error style). How can I do this? Just setting border will delete the default style of the input, setting only border-color will look weird, setting an outline will work in some cases (and doesn't look so good in Firefox).
我有默认样式的输入字段（没有添加 css，只是宽度/高度/填充），但现在我想给它一个红色边框（错误样式）。我怎样才能做到这一点？只设置边框会删除输入的默认样式，只设置边框颜色会看起来很奇怪，设置轮廓在某些情况下会起作用（在 Firefox 中看起来不太好）。
Any tips?
有小费吗？
EDIT:Come on guys read the question before answering. I want the browser default look of the input, I just want to give it a red border.
编辑：来吧伙计们在回答之前阅读问题。我想要输入的浏览器默认外观，我只想给它一个红色边框。
采纳答案by mattbee
I would have thought this would have been answered already - but surely what you want is this: box-shadow: 0 0 3px #CC0000;
我原以为这已经得到了回答 - 但你肯定想要的是： box-shadow: 0 0 3px #CC0000;
Example: http://jsfiddle.net/vmzLW/
回答by KillerFish
You can use jquery for this by utilizing addClass() method
您可以通过使用 addClass() 方法来使用 jquery
CSS
CSS
.defaultInput
{
width: 100px;
height:25px;
padding: 5px;
}
.error
{
border:1px solid red;
}
<input type="text" class="defaultInput"/>
Jquery Code
查询代码
$(document).ready({
$('.defaultInput').focus(function(){
$(this).addClass('error');
});
});
Update:You can remove that error class using
更新：您可以使用删除该错误类
$('.defaultInput').removeClass('error');
It won't remove that default style. It will remove .error class only
它不会删除该默认样式。它只会删除 .error 类
回答by Ian Wood
whats actually wrong with:
实际上有什么问题：
input { border: 1px solid #f00; }
do you only want it on inputs with errors? in that case give the input a class of error...
你只想要它在有错误的输入上吗？在这种情况下，给输入一类错误......
input.error { border: 1px solid #f00; }
回答by Dilshan Liyanage
If it is an Angular applicationyou can simply do this
如果它是一个Angular 应用程序，您可以简单地执行此操作
input.ng-invalid.ng-touched
{
border: 1px solid red !important;
}
回答by Christopher Grigg
If I understand your question correctly this should solve it:
如果我正确理解您的问题，这应该可以解决它：
HTML - create a simple input field.
HTML - 创建一个简单的输入字段。
<input type="text" id="giraffe" />
CSS - clear out the native outline so you can set your own and it doesn't look weird with a bluey red outline.
CSS - 清除本机轮廓，以便您可以设置自己的轮廓，并且蓝色红色轮廓看起来并不奇怪。
input:focus {
outline: none;
}
.error-input-border {
border: 1px solid #FF0000;
}
JS - on typing in the field set red border class declared in the CSS
JS - 在字段中键入 CSS 中声明的红色边框类
document.getElementById('giraffe').oninput = function() { this.classList.add('error-input-border'); }
This has a lot of information on the latest standards too: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/Data_form_validation
这也有很多关于最新标准的信息：https: //developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/Data_form_validation
回答by Alexandre Vieira
border-color: transparent; border: 1px solid red;
边框颜色：透明；边框：1px纯红色；
