Can't change border color when input field is active

Question

I can't change border color when the input field is active. I tried using input:active, input:focus. What I want is the color of input's border to change when user clicks on it.

The CSS code :

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 Code:

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

The css looks like SCSS (mentally derived by BrettEast's comment). — Dirk Schumacher, Jun 09 '22 at 09:13

score 6 · Accepted Answer · answered Nov 09 '21 at 16:30

So this is a few things, your css isn't valid, you've written scss syntax. If you're aware of this and the question is meant to say "scss", then you need to add outline: none;. Also #black isn't a valid colour.

Example in 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;
    }
}

In 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;
    }

You can't use the & in regular css.
#Black isn't a css colour value.
You need outline: none to override the browser's default focus behaviour.

`outline: none` is the helping spot! Thank you! Using `&:active` as sub declaration can be done in SCSS style css declarations. — Dirk Schumacher, Jun 09 '22 at 09:05

Can't change border color when input field is active

1 Answers1