onfocus用于表单输入以更改边框颜色？

Question

我正在尝试在用户点击字段时为表单字段添加颜色边框，我擅长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>

有什么想法吗？

Answer 1

使用onBlur和onFocus添加和减去类可能更简洁。然后在css类中你可以：

.focus {
background: yellow;
color: #000;
border: 1px solid red;
}

有关边框属性的更多信息，请查看here。 （向那些讨厌w3schools的人道歉，但对于这种类型的参考，这是一个合理的地方）。

http://www.cssdrive.com/index.php/examples/exampleitem/focus_pseudo_class/

Answer 2

只需使用css作为轮廓颜色，如下所示：

.class {
    outline-color:#FF0;
}

Answer 3

你可以使用:focus pseudoclass #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');
});

Answer 4

我不建议使用这样的内联样式，甚至建议通过javascript / jquery连接事件但是......

您可以使用object.style.borderColor设置背景颜色。颜色只是字体颜色。

简写中的css标记只是“边框”或者特别是如果你想从css设置边框颜色它是'border-color'。在javascript中转向this.style.borderColor。

Answer 5

Carl-Michael Hughes的答案终于为我效劳了！ outline-color是设置焦点“border”颜色的唯一方法。谢谢！

Answer 6

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我实现了以下输出：

希望这对你有所帮助:-)