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

Change the color of a input-field when selected

提问by Marcel

i haven't found the code yet. Maybe someone can help me? I want to change the border-color of a input type="text" field when it is selected. Atm the border gets blue when i click in such a field. I tried border-color but it didn't work. I am new to css and html.

我还没有找到代码。也许有人可以帮助我？我想在选择时更改 input type="text" 字段的边框颜色。当我单击这样的字段时，Atm 边框会变蓝。我尝试了边框颜色，但没有用。我是 css 和 html 的新手。

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

Thanks!

谢谢！

Edit: I don't talk about the background-color! I just want to change the color of the mark around the box thats visible when the box gets selected.

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

回答by Roko C. Buljan

Try with :focusand go for outline

尝试:focus并继续outline

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

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

Or if you want more freedom (since outline is squared) set outline to noneand play with borderor box-shadow. Just use something, for accessibility.

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

Using 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...">

回答by amol patil

Try this example after click input then color change:

单击输入然后颜色更改后尝试此示例：

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

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

A working example can be found here.

可以在此处找到工作示例。

回答by amol patil

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>