输入框被激活时无法更改边框颜色。

Question

输入框被激活时无法更改边框颜色。

4

当输入字段处于活动状态时，我无法更改边框颜色。我尝试使用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>

- JohnMckenzie

看起来与此相关 https://dev59.com/qGQo5IYBdhLWcg3wUN7Z#16156683 - mkemaltas

CSS看起来像SCSS（由BrettEast的评论推断出）。 - Dirk Schumacher

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Brett East · Accepted Answer

这里有几个问题，你的 CSS 不合法，你使用了 SCSS 语法。如果你知道这一点，而且问题是要说“SCSS”，那么你需要加入 outline: none;。此外，#black 不是有效的颜色。

在 SCSS 示例中：

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来覆盖浏览器默认的焦点行为。