Hey everyone.
I have this site I'm building for someone: https://crazy-chicken-girl.22web.org
On the contact section, the labels for the input fields are showing as I would expect them to on Vivaldi and Microsoft Edge, but on Firefox, only the first two labels are in the right place, but the next ones are not (see the attached images).
This is the code for the labels:
How can I make it work for both Chrome and Firefox?
I have this site I'm building for someone: https://crazy-chicken-girl.22web.org
On the contact section, the labels for the input fields are showing as I would expect them to on Vivaldi and Microsoft Edge, but on Firefox, only the first two labels are in the right place, but the next ones are not (see the attached images).
This is the code for the labels:
HTML:
<form>
<label for="name">Name</label>
<input required type="text" id="name" name="name" value="">
<label for="email">Email</label>
<input required type="email" id="email" name="email" value="">
<label for="subject">Subject</label>
<select required id="subject" name="subject">
<option value="" selected disabled hidden></option>
</select>
<label for="message">Message</label>
<textarea required id="message" name="message" maxlength="500"></textarea>
<input type="submit" name="submit" value="Submit">
</form>
CSS:
:root {
--comfortaa: 'Comfortaa', sans-serif;
}
label {
font-family: var(--comfortaa);
font-size: 16px;
background-color: white;
padding: 0 4px;
color: black;
position: absolute;
margin-left: 16px;
margin-top: -8px;
}
How can I make it work for both Chrome and Firefox?