选择时更改输入字段的颜色

Question

我还没有找到代码。也许有人可以帮助我？我想在选中时更改输入类型 =“文本”字段的边框颜色。当我在这样的字段中单击时，Atm 边框会变蓝。我尝试了边框颜色，但没有用。我是 css 和 html 的新手。

 <input type="text" placeholder="Name...">

谢谢！

编辑：我不谈论背景颜色！我只想更改选中框时可见的框周围标记的颜色。

原文由 user7209949 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

尝试使用 :focus 并寻找 outline

 input[type=text]:focus{
  outline: 2px solid orange;     /* oranges! yey */
}

 <input type="text" placeholder="Name...">

或者如果你想要更多的自由（因为轮廓是方形的）设置轮廓为 none 并玩 border 或 box-shadow 只需使用一些东西，以获得可访问性。

使用盒子阴影：

 input[type=text] {
  border: none;        /* Remove default borders */
  padding: 4px 8px;
  border-radius: 12px; /* Sadly outline does not round! therefore...*/
}
input[type=text]:focus{
  outline: none;      /* Remove default outline and use border or box-shadow */
  box-shadow: 0 0 0 2px orange; /* Full freedom. (works also with border-radius) */
}

 <input type="text" placeholder="Name...">

原文由 Roko C. Buljan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

enter code here

 input:focus {
 color: red;
 outline: 2px solid orange;
}
input.visited {
  color: red;
 outline: 2px solid orange;
}

 <form>
  First name: <input type="text" name="firstname" onchange="this.className=(this.value=='')?'':'visited';"><br>
  Last name: <input type="text" onchange="this.className=(this.value=='')?'':'visited';" name="lastname">
</form>

原文由 amol patil 发布，翻译遵循 CC BY-SA 4.0 许可协议