html - 选中时如何更改文本字段背景

Question

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

到目前为止，这是我的代码。

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

Answer 1

就像这样:

 .textbox:focus {
     background: lightgray;
 }

The :focus CSS pseudo-class is applied when an element has received focus, either from the user selecting it with the use of a keyboard or by activating with the mouse (e.g. a form input). Reference