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伪类#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

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">

Answer 5

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

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

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

Answer 6

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

Answer 7

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

希望这对您有所帮助：-）