Html 用于表单输入以更改边框颜色的 onfocus？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4609183/
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
onfocus for form input to change border colour?
提问by Niall Paterson
I'm trying to add a colour border to a form field when a user clicks on the field, I'm good at html and javascript, with a bit of php, but my css is actually quite poor. The code for the form etc is below. I would really appreciate if anyone could direct or help me. CODE:
我试图在用户单击字段时向表单字段添加颜色边框，我擅长 html 和 javascript，还有一点 php，但我的 css 实际上很差。表格等的代码如下。如果有人可以指导或帮助我，我将不胜感激。代码：
<form id="search" action="http://www.bkslap.com/search/results.php" id="cse-search-box">
<input name="q" type="text" id="q" autocomplete="on" size="56" style="color:#ccc;" maxlength="128" id="q"
onblur="this.value = this.value || this.defaultValue; this.style.color = '#ccc';"
onfocus="this.value=''; this.style.color = '#9933FF';"
value="Search" />
</form>
Any thoughts?
有什么想法吗？
回答by JakeParis
It'd probably be cleaner to add and subtract a class with the onBlur and onFocus. Then in the css class you could have:
使用 onBlur 和 onFocus 添加和减去一个类可能会更清晰。然后在 css 类中你可以有：
.focus {
background: yellow;
color: #000;
border: 1px solid red;
}
Check herefor more information on the border properties. (with apologies to those who hate w3schools, but it's a reasonable place for this type of reference).
查看此处了解有关边框属性的更多信息。（向那些讨厌 w3schools 的人道歉，但对于这种类型的参考，这是一个合理的地方）。
http://www.cssdrive.com/index.php/examples/exampleitem/focus_pseudo_class/
http://www.cssdrive.com/index.php/examples/exampleitem/focus_pseudo_class/
回答by Carl-Michael Hughes
Just use css for outline color like so:
只需将 css 用于轮廓颜色，如下所示：
.class {
outline-color:#FF0;
}
回答by Sotiris
you can use the :focuspseudoclass #q:focus {border:red 1px solid;}but as you can see here http://www.quirksmode.org/css/contents.htmlit's not supported by ie 7 and below. To achieve cross browser compatibility you can use jquery and the following code
您可以使用:focus伪类，#q:focus {border:red 1px solid;}但正如您在此处看到的http://www.quirksmode.org/css/contents.html，ie7 及以下版本不支持它。要实现跨浏览器兼容性，您可以使用 jquery 和以下代码
$('#q').focus(function() {
$('#q').css('border','1px solid red');
});
回答by Ryan Christensen
I don't recommend using inline style like this and would even recommend wiring up the events via javascript/jquery but...
我不建议使用这样的内联样式，甚至建议通过 javascript/jquery 连接事件，但是......
You can set background color with object.style.borderColor. Color is only the font color.
您可以使用 object.style.borderColor 设置背景颜色。颜色只是字体颜色。
The css markup in shorthand is just 'border' or specifically if you want to set border color from css it is 'border-color'. In javascript that turns to this.style.borderColor.
简写的 css 标记只是“边框”，或者特别是如果你想从 css 设置边框颜色，它是“边框颜色”。在转为 this.style.borderColor 的 javascript 中。
回答by Hank
The answer from Carl-Michael Hughes is what finally worked for me! outline-color is the only way to set the focus "border" color. Thanks!
Carl-Michael Hughes 的答案最终对我有用！轮廓颜色是设置焦点“边框”颜色的唯一方法。谢谢！
回答by Abhay Shiro
input:not([type="button"]):not([type="submit"]):not([type="reset"]):hover, input:not([type="button"]):not([type="submit"]):not([type="reset"]):focus, textarea:hover, textarea:focus, select:hover, select:focus {
border-color: #81256f;
box-shadow: none;
}
Use this CSS. This will do the job for you. With the above CSS i achieved the following output:
使用这个 CSS。这将为您完成这项工作。使用上述 CSS，我实现了以下输出：
Hope this helped you :-)
希望这对你有帮助:-)
回答by jykmhar123
input:not([type="button"]):not([type="submit"]):not([type="reset"]):hover, input:not([type="button"]):not([type="submit"]):not([type="reset"]):focus, textarea:hover, textarea:focus, select:hover, select:focus
{
border:2px solid #1b2a44;
outline:none;
}
.form-control{
padding:5px;
background-color:#f7f7f7;
border:1px solid red;
} <label>TextBox 1:</label><input type="text" class="form-control">
<label>TextBox 2:</label> <input type="text" class="form-control">