CSS Input box styles are not applied immediately-CodePudding

The styling of the input box:

.inputBox {
  font-size: 5rem;
  background-color: red;
}

The font-size makes the input change its height, but the characters are bigger only when I click somewhere on the page. As for the color, it only changes to red when I start typing inside the input box.

In my jsx/html I create a custom input component but it shouldn't be related to the error:

export default function Input({ type, id, style, className }) {
  return (
    <input type={type} id={id} className={clsx(classes.inputBox, className)} />
  );
}

And the Input box is being rendered here:

<div>
  <label htmlFor="password">Password</label>
  <Input type="password" id="password" />
</div>

Thanks in advance

CodePudding user response：

I think you have used the wrong selector in CSS, your input has an ID of password, not a class of inputBox, so just make the CSS like this:

#password {
  font-size: 5rem;
  background-color: red;
}

CodePudding user response：

It just started to work suddenly, I swear I didn't do anything, probably something with Chrome browser, thanks for everyone trying to help

CodePudding user response：

It will sometimes happen when you apply a :focus pseudo-class on your input element. Maybe it set accidentally in your CSS. Review again your styles.