当用户单击该字段时，我正在尝试为表单字段添加颜色边框，我擅长 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>
有什么想法吗？
使用 onBlur 和 onFocus 添加和减去一个类可能会更简洁。然后在css类中你可以有：
.focus {
background: yellow;
color: #000;
border: 1px solid red;
}
在此处查看有关边框属性的更多信息。（对那些讨厌 w3schools 的人表示歉意，但它是此类参考的合理场所）。
http://www.cssdrive.com/index.php/examples/exampleitem/focus_pseudo_class/
只需使用 css 作为轮廓颜色，如下所示：
.class {
outline-color:#FF0;
}
您可以使用:focus伪#q:focus {border:red 1px solid;}类，但正如您在这里看到的http://www.quirksmode.org/css/contents.html它不受 ie 7 及以下版本的支持。要实现跨浏览器兼容性，您可以使用 jquery 和以下代码
$('#q').focus(function() {
$('#q').css('border','1px solid red');
});
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">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;
}
使用这个 CSS。这将为您完成工作。使用上面的 CSS，我实现了以下输出：
希望这对你有帮助:-)
我不建议使用这样的内联样式，甚至建议通过 javascript/jquery 连接事件，但是......
您可以使用 object.style.borderColor 设置背景颜色。颜色只是字体颜色。
速记中的 css 标记只是“边框”，或者特别是如果您想从 css 设置边框颜色，它是“边框颜色”。在变成 this.style.borderColor 的 javascript 中。
Carl-Michael Hughes 的回答最终对我有用！outline-color 是设置焦点“边框”颜色的唯一方法。谢谢！