html - 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/