When it comes to the input box styling:
.inputBox {
font-size: 5rem;
background-color: red;
}
https://i.sstatic.net/pfCBi.jpg
The font-size adjustment seems to affect the input box height only after clicking somewhere on the page, and the text appears larger when typing inside the box. As for the color, it changes to red when text is entered into the input box.
Although I have a custom input component in my jsx/html, it should not be the cause of this issue:
export default function Input({ type, id, style, className }) {
return (
<input type={type} id={id} className={clsx(classes.inputBox, className)} />
);
}
The Input box is rendered here:
<div>
<label htmlFor="password">Password</label>
<Input type="password" id="password" />
</div>
Thank you in advance