I am working on an app in NextJS. I have an email input field with a placeholder example@example.com. It displays correctly in Chrome but this weird thing happens in Safari browser. I have never run into this problem, any idea what might be causing this? Below you can see my HTML (JSX) code and CSS, as well as some screenshots.
<form>
<input value={email} onChange={handleChange} placeholder="example@example.com" className="email-input" type="email"></input>
</form>
.email-input {
width: 80vw;
height: 4.5vh;
outline: none;
border: 3px solid #8F8D89;
border-radius: 5px;
margin-bottom: 2vh;
background-color: #EAE8DC;
padding-left: 1vw;
padding-right: 1vw;
}
.email-input:focus {
border: 3px solid #E88074;
}
.email-input::placeholder {
font-family: light-font;
font-size: 3vh;
color: #8F8D89;
text-align: center;
}
Try this
properties
bro: