为什么我的 :focus 不起作用？我已将 CSS 正确链接到 HTML，但输入的样式也未按照样式表设置 [重复]答案

【问题标题】：Why is my :focus not working? I have linked the CSS to the HTML properly, but also the input is not styled as per the stylesheet [duplicate]为什么我的 :focus 不起作用？我已将 CSS 正确链接到 HTML，但输入的样式也未按照样式表设置 [重复]
【发布时间】：2021-01-13 04:38:56
【问题描述】：

这只是一个例子。我希望输入的边框在单击时变圆。但它没有发生。

.username {
    border-radius: 0%;
}
.username :focus{
    border-radius: 30%;
}

&lt;input class="username" type="text" placeholder="Username or Email"&gt;

【问题讨论】：

去掉用户名和焦点之间的空格。 .username:focus{} 伪可能实际上是 :active。

标签： html css hover focus web-deployment

【解决方案1】：

对我来说，摆脱空间是有效的。改变： .username :focus {} 到 .username:focus {}

【讨论】：

你的答案是对的，但一定是评论。

【解决方案2】：

去掉用户名和焦点之间的空格。 .username:focus{} 伪可能实际上是:active。

.username:active {
   color: red;
}

【讨论】：

【解决方案3】：

我觉得你的答案是这样的。

    .username {
        border: 2px inset;
        border-radius: 0px;
    }
    .username:focus {
        border-radius: 10px;
        outline: none;
    }

&lt;input class="username" type="text" placeholder="Username or Email"&gt;

【讨论】：