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

Question

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

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

<input class="username" type="text" placeholder="Username or Email">

Answer 1

对我来说，摆脱 space 行之有效。改变： .用户名：焦点{} 到 .username:focus {}

Answer 2

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

.username:active {
   color: red;
}

Answer 3

我想你的答案是这样的。

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

<input class="username" type="text" placeholder="Username or Email">

为什么我的 :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

html

css

focus

hover

web-deployment