Html 更改文本输入边框颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19867512/
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
Change text input border color
提问by Sorin
I want to make a form where data is verified using JavaScript before being sent. When a field is empty, I want to set its border to red.
我想制作一个表格，在发送之前使用 JavaScript 验证数据。当一个字段为空时，我想将其边框设置为红色。
HTML code:
HTML代码：
<label>Question: </label><input type = "text" maxlength = "100" name = "question"> <br />
JavaScript code 1:
JavaScript 代码 1：
fields[i].style.borderColor = "red";
JavaScript code 2:
JavaScript 代码 2：
fields[i].style.border = "1px solid red";
If I use JS code 1, the border changes its color but it has the width bigger than before (even though I do not say anything about border width). If I use JS code 2, the text input shrinks with 2px and the change is noticeable.
如果我使用 JS 代码 1，边框会改变它的颜色，但它的宽度比以前更大（即使我没有说任何关于边框宽度的内容）。如果我使用 JS 代码 2，文本输入会缩小 2px，变化很明显。
What should I do to change only the border color?
我该怎么做才能只更改边框颜色？
回答by nkmol
The default user agent stylesheet uses this for the input field:
默认的用户代理样式表将其用于输入字段：
border: 2px inset;
Now you may ask why is this not defined by default?
现在你可能会问为什么默认没有定义这个？
by default(In IE the appreance is hard-coded):
默认情况下（在 IE 中，外观是硬编码的）：
appearance: textfield;
But whenever you change something:
但是每当你改变一些东西时：
appearance: none;
And when the appearanceis none, you will see the 2px inset border.
当appearance为 none 时，您将看到 2px 的内嵌边框。
So actually the width is the problem here:
所以实际上宽度是这里的问题：
So you want to change 2 propeties: Border-widthand border-color
You would need 2 lines now:
所以，你想改变2个化子性质：Border-width和border-color
你现在就需要2线：
document.getElementsByTagName('input')[0].style.border = "red";
document.getElementsByTagName('input')[0].style.borderWidth = "1px";
However your own solution might be elegant, as it is defined with one line of code:
但是，您自己的解决方案可能很优雅，因为它是用一行代码定义的：
fields[i].style.border = "1px solid red";
请注意，插入样式将顶部和右侧边框设置为更亮，其中底部和左侧边框是给定的颜色。将样式设置为solid 将解决这个问题。
It won't harm your code to use the whole shorthand property of border. You always have to be very specificwhen you want to win the battle with the user agent stylesheet.
使用 border 的整个速记属性不会损害您的代码。当您想赢得与用户代理样式表的战斗时，您总是必须非常具体。
回答by Gaurav Bhor
Actually this is preferred by adding and removing classes:
实际上，这是通过添加和删除类来首选的：
$("input").change(function()
{
var value = $(this).val();
if(value=="")
{
$(this).addClass("red-border");
$(this).focus();
}else
{
$(this).removeClass("red-border");
}
});
And your CSS:
还有你的 CSS：
.red-border{
border: 1px solid red;
}
回答by eoszak
I have something like this in production, only it uses alerts instead of color change. Use CSS Styles & classes:
我在生产中有这样的东西，只有它使用警报而不是颜色变化。使用 CSS 样式和类：
CSS
CSS
.error {
border:2px solid red;
}
JavaScript
JavaScript
<script>
function checkField(){
var f = document.getElementById('<name of field>').value;
if (f === "") {
document.getElementById('<name of field>').className = document.getElementById('<name of field>').className + " error";
return false;
}
}
</script>
Then add this to your button/control's click event:
然后将此添加到您的按钮/控件的点击事件中：
return checkField()
This SO post seems to be similar:changing textbox border colour using javascript
这篇SO帖子似乎很相似：使用javascript更改文本框边框颜色
回答by Piotr Nowicki
Use outline instead of border.
使用轮廓而不是边框。
fields[i].style.outline = "1px solid red";
fields[i].style.outline = "1px solid red";
回答by andre3wap
Try this out. Jquery
试试这个。查询
$("input").change(function ()
{
var value = this.value;
if(value=="")
{
$(this).css("border", "1px solid red");
}else
{
$(this).css("border",'');
}
}).trigger("change");
Html
html
<input type="text" class="col">
