Solution 1 :

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;

Solution 2 :

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

Solution 3 :

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.

Problem :

The styling of the input box:

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

enter image description here

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:

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

Thanks in advance


Comment posted by Damian Busz

Can’t tell much from what we got here. Can you provide minimal reproduction example? You could use codesandbox