輸入字段處於活動狀態時無法更改邊框顏色

Question

當輸入字段處於活動狀態時，我無法更改邊框顏色。 我嘗試使用輸入：活動，輸入：焦點。 我想要的是當用戶點擊它時輸入邊框的顏色會發生變化。

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也不是有效的顏色。

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來覆蓋瀏覽器的默認焦點行為。