在 html css 中为 class 名称应用 :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 中的特定 class？请帮忙提前谢谢

Answer 1

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

Answer 2

正在应用您的样式，只是语义有误。使用下面的代码

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

Answer 3

试试这个代码。不需要其他任何东西。点击后它会把你的按钮变成红色。

.myclass:焦点 {

 border:1px solid #FF0000;

}

Answer 4

你需要这样做

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

Answer 5

通过添加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>

谢谢皮特的火花，提到荧光笔是轮廓。对于所有回答者。

Answer 6

您只需要指定边框大小和类型，而不仅仅是颜色

看下面的例子

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

在 html css 中为 class 名称应用 :focus

Apply :focus for a class name in html css

html

css

textbox