Question

要在文本输入处于活动状态时删除文本输入的边框，我可以这样做：

textarea:focus, input:focus{
    outline: 0;
}

我如何在其上添加自己的边框颜色？例如：

textarea:focus, input:focus{
    outline: 0;
    border: 1px solid red;
}

Answer 1

你可以试试这个：

textarea:focus {
    outline: none;
    box-shadow: 0px 0px 5px red;/*here change the color*/
    border:1px solid red;/*here change the color*/
}
textarea:focus:hover {
    outline: none;
    box-shadow: 0px 0px 5px red;/*here change the color*/
    border:1px solid red;/*here change the color*/
    border-radius:0;
}

<textarea></textarea>

Answer 2

请检查 jsFiddle 。

CSS：

input:focus { 
    outline: none !important;
    border:1px solid red;
}

textarea:focus {
    outline: none !important;
    border:1px solid red;
}

Answer 3

textarea{
  outline: 1;
  outline-color: red;
}

<textarea></textarea>

检查大纲属性的所有功能：http://www.w3schools.com/css/css_outline.asp

Answer 4

这对我来说很好。更改焦点上的边框颜色。

input:focus{
    outline: 0;
    border:1px solid #0f0;
}

Answer 5

要更改的相关属性为border，outline无效。

请参阅以下内容：

＆＃13;

textarea, input {
    border: 1px solid blue;
}
textarea:focus, input:focus {
    border: 1px solid red;
}

＆＃13;

<textarea></textarea>
<br><br>
<input type="text" value="test">

＆＃13;

Answer 6

在焦点上，我建议使用outline和/或text-shadow属性。我使用 Modernizr ，您可以同时使用这两者，因此不支持text-shadow的旧浏览器可能会产生焦点效果。

＆＃13;

textarea:focus, input:focus {
    outline: 0;
}

textarea:focus, input:focus {
    box-shadow: 0px 0px 3px red;
}

.no-boxshadow textarea:focus, .no-boxshadow input:focus {
    outline: 1px solid red;
}

＆＃13;

<textarea></textarea><br />

＆＃13;

我更喜欢使用borders，我建议您在元素上指定默认边框样式，以避免对焦点产生轻弹效果。

更改文本输入的边框颜色

6 个答案: