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

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

卡尔-迈克尔·休斯的答案最终对我有用！轮廓颜色是设置焦点“边框”颜色的唯一方法。谢谢！

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

希望这对您有帮助:-)

Answer 7

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

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

速记中的 CSS 标记就是“border”，或者具体来说，如果您想从 css 设置边框颜色，则它是“border-color”。在 javascript 中，转向 this.style.borderColor。