Question

我还没有找到代码。也许有人可以帮助我？我想在选择时更改输入类型=“文本”字段的边框颜色。当我点击这样一个字段时，边框变为蓝色。我试过边框颜色，但它不起作用。我是css和html的新手。

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

谢谢！

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

Answer 1

尝试:focus并转到outline

＆＃13;

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

＆＃13;

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

＆＃13;

或者，如果您想要更多自由（因为轮廓是平方的），请将轮廓设置为none并使用border或box-shadow。只需使用一些东西，即可访问。

使用box-shadow：

＆＃13;

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) */
}

＆＃13;

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

＆＃13;

Answer 2

点击输入然后更改颜色后，尝试以下示例：

<style>
    input:focus {
       color: red;
       outline: 2px solid orange;  
    }

    input.visited {
       color: red;
       outline: 2px solid orange;  
    }
 </style>

可以找到一个有效的示例here。

Answer 3

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>

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

3 个答案:

使用box-shadow：