我有一个输入文本框。选择相同内容时，会出现荧光笔(文本框周围的蓝色框(。我需要一条红线作为输入文本框选择的底部边框。请参阅代码：
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>由于我的页面中有多个输入文本框，并且我只想将样式应用于一个文本框。所以我不能使用输入：焦点代码。如何将"：focus"应用于css中的特定类？请帮忙提前感谢
您需要执行此
.myclass:focus {
border-bottom: 1px solid red;
}使用border-bottom-color而不是border-bottom仅设置color(红色(
或使用border-bottom:1px solid red
input:focus {
background-color: yellow;
}
.myclass:focus {
border-bottom-color: red;
}<body>
<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>您的样式正在被应用，只是语义错误。使用以下代码
<!DOCTYPE html>
<html>
<head>
<style>
.:focus {
background-color: yellow;
}
.myclass:focus {
border-bottom: solid 2px red;
}
</style>
</head>
<body>
<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>
</body>
</html>通过添加outline:color和修改边框样式来解决。这是代码
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
input:focus {
background-color: yellow;
}
.myclass:focus {
border: none;
border-bottom: solid 0.5px red;
outline: red;
}
</style>
</head>
<body>
<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>
</body>
</html>谢谢你的火花，皮特，提到荧光笔是轮廓。以及所有回答的人。
试试这个代码。不需要其他任何东西。点击后，它会把你的按钮变成红色。
.myclass:focus｛
border:1px solid #FF0000;
}
您只需要指定边框大小和类型，而不需要指定颜色
看看下面的示例
.myclass:focus {
border-bottom: 1px solid red;
}