html - 为 html css 中的类名应用 :focus

Question

我有一个输入文本框。选择相同时，会出现荧光笔（文本框周围的蓝色框）。我需要一条红线作为输入文本框选择的底部边框。请看代码：

input:focus {
  background-color: yellow;
}

.myclass:focus {
  border-bottom: red;
}

<p>Click inside the text fields to see a yellow background:</p>

<form>
  First input box: <input class="myclass" type="text" name="firstname"><br> 
  Second input box: <input type="text" name="lastname">
</form>

由于我的页面中有多个输入文本框，并且我只想将样式应用于一个文本框。所以我不能使用 input:focus 代码。如何将 ':focus' 应用于 css 中的特定类？请帮助提前谢谢

标签： htmlcsstextbox

Answer 1

你需要这样做

.myclass:focus {
    border-bottom: 1px solid red;
}