为 html css 中的类名应用 :focus答案

【问题标题】：Apply :focus for a class name in html css为 html css 中的类名应用 :focus
【发布时间】：2018-07-12 23:21:55
【问题描述】：

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

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 中的特定类？请帮忙提前谢谢

【问题讨论】：

.myclass:focus 不起作用？
你需要设置 outline 的样式而不是焦点，但不确定你是否只能做一侧 - 你可能想取消轮廓，然后使用带有 :focus 的border-bottom
不，我不知道为什么
边框宽度给定，如border:1px soild

标签： html css textbox

【解决方案1】：

你需要这样做

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

【讨论】：

【解决方案2】：

使用border-bottom-color 而不是border-bottom 来设置仅 color(red)

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

【讨论】：

告诉我以获得更多帮助！

【解决方案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>

【讨论】：

【解决方案4】：

通过添加轮廓：颜色和修改边框样式解决。这是代码

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

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

【讨论】：

【解决方案5】：

试试这个代码。不需要其他任何东西。单击时它将使您的按钮变为红色。

.myclass:focus {

 border:1px solid #FF0000;

}

【讨论】：

【解决方案6】：

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

看看下面的例子

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

【讨论】：