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

Question

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

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

谢谢!

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

Answer 1

试着:focus去吧outline

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

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

或者如果你想要更多的自由(因为轮廓是平方的)设置轮廓none并使用border或box-shadow.只是使用一些东西,以便访问.

使用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...">