输入字段处于活动状态时无法更改边框颜色

Question

当输入字段处于活动状态时，我无法更改边框颜色。我尝试使用 input:active、input:focus。我想要的是当用户点击它时输入框的颜色会改变。

CSS代码：

input {
    margin-top: 20px;
    border-radius: 0px;
    background-color: #FFFFFF;
    border: 1px solid black;
    height: 33px;
    width: 200px;

    &:active {
      font-size: 13px;
      border: 2px solid Red;
      background-color: #ffffff;
    }

    &:disabled {
      border: 1px #Black;
      border-radius: 0px;
      background-color: #F9FAFB;
    }

HTML代码：

<div class="container">
    <form>
      <label for="input-field">Text</label>
      <input type="text" placeholder="...">
      <button>..</button>
    </form>
 </div>

Answer 1

所以这是一些事情，你的 css 无效，你写了 scss 语法。如果您知道这一点并且问题的意思是“scss”，那么您需要添加 outline: none;。 #black 也不是有效的颜色。

s 中的示例css:

input {
    margin-top: 20px;
    border-radius: 0px;
    background-color: #FFFFFF;
    border: 1px solid black;
    height: 33px;
    width: 200px;

    &:active, &:focus { // I think you said you wanted focus as well
      font-size: 13px;
      border: 2px solid red;
      outline: none; // add this
      background-color: #ffffff;
    }

    &:disabled {
      border: 1px solid black; // update this
      border-radius: 0px;
      background-color: #F9FAFB;
    }
}

在css中：

input:active, input:focus { // I think you said you wanted focus as well
      font-size: 13px;
      border: 2px solid red;
      outline: none; // add this
      background-color: #ffffff;
    }

您不能在常规 css 中使用 &。
#Black 不是 css 颜色值。
您需要 outline: none 来覆盖浏览器的默认焦点行为。

输入字段处于活动状态时无法更改边框颜色

Can't change border color when input field is active

html

css

sass