Question

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

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

＆＃13;

       .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%;
       }

＆＃13;

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

＆＃13;

Answer 1

就像这样：

 .textbox:focus {
     background: lightgray;
 }

：收到元素时应用焦点CSS伪类焦点，来自用户使用键盘选择它或通过用鼠标激活（例如表格输入）。 Reference

Answer 2

您可以使用CSS伪类:focus在文本框聚焦时应用样式。请注意，由于您应用了自动聚焦属性，因此第一个名称会自动聚焦。

例如：

.textbox:focus {
  background: gray;
}

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: