选择时如何更改文本字段背景答案

【问题标题】：how can I change the textfield background when selected选择时如何更改文本字段背景
【发布时间】：2016-04-10 02:20:26
【问题描述】：

选中后如何更改文本字段的背景？例如，我单击了名字的文本字段，该文本字段的背景应变为灰色，以便用户知道这是他正在编辑的当前文本。

这是我目前的代码。

       .textbox {
         background: white;
         border: 1px solid #DDD;
         border-radius: 5px;
         box-shadow: 0 0 5px #DDD inset;
         color: #666;
         outline: none;
         height: 2.5em;
         width: 28em;
         margin-bottom: 2%;
       }

<label for="first name">First Name *</label>
<br>
<input class="textbox" type=text autofocus id="Fname" name="Fname" maxlength="50" size="30" value="" required>
<br>

<label for="last name">Last Name *</label>
<br>
<input class="textbox" type=text autofocus id="Lname" name="Lname" maxlength="50" size="30" value="" required>

【问题讨论】：

如前所述，您需要使用 :focus 伪类。我建议您检查 CSS 的所有伪类以了解它们的工作原理并了解选择器的不同可能状态：developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

标签： html css textfield

【解决方案1】：

就这样：

 .textbox:focus {
     background: lightgray;
 }

:focus CSS 伪类在元素收到时应用焦点，无论是用户使用键盘选择它还是通过用鼠标激活（例如表单输入）。 Reference

【讨论】：

【解决方案2】：

您可以使用 CSS 伪类 :focus 在文本框获得焦点时应用样式。请注意，由于您应用了 autofocus 属性，因此名字会自动获得焦点。

例如：

.textbox:focus {
  background: gray;
}

.textbox {
  background: white;
  border: 1px solid #DDD;
  border-radius: 5px;
  box-shadow: 0 0 5px #DDD inset;
  color: #666;
  outline: none;
  height: 2.5em;
  width: 28em;
  margin-bottom: 2%;
}

.textbox:focus {
  background: gray;
}

<label for="first name"> First Name *</label>
<br>
<input class="textbox" type=text autofocus id="Fname" name="Fname" maxlength="50" size="30" value="" required>


<br>
<label for="last name"> Last Name *</label>
<br>
<input class="textbox" type=text autofocus id="Lname" name="Lname" maxlength="50" size="30" value="" required>

【讨论】：