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;
}

点击此处查看有关边境属性的更多信息.(向那些讨厌w3schools的人道歉,但对于这种类型的参考,这是一个合理的地方).

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

Answer 2

只需使用css作为轮廓颜色,如下所示:

.class {
    outline-color:#FF0;
}

Answer 3

您可以使用: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');
});