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代码。如何在CSS中将'：focus'应用于特定类？请提前帮助

Answer 1

您需要执行此操作

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

Answer 2

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

您的样式正在得到应用，只是语义是错误的。使用以下代码

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

只需尝试以下代码。不需要其他任何东西。单击后，您的按钮将变为红色。

.myclass：焦点 {

body {
  height:100vh;
  margin:0;
  background:
   linear-gradient(to top,rgba(255,255,255,1),rgba(255,255,255,0)),
   linear-gradient(to right,black,white);
}

}

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

将：focus应用于html CSS

6 个答案: