I designed a sign-in box with email and password inputs, along with some JavaScript to change its style when filled in. The CSS I used also moves the placeholder when the input is focused. Everything was working perfectly until I tested it in Firefox.
Firstly, I noticed that when the placeholder moves up, it disappears even though it's styled with display: block
.
Secondly, after typing text, clearing the input, and then unfocusing, a strange line appears above the input field.
I've attempted to tweak some styles, but haven't had any luck so far.
Check out my jsfiddle page for reference: https://jsfiddle.net/Etibi/z231ogeL/