-1

So I have a sign in box with an email and password input. I have some javascript to make it change style when not empty. My CSS moves the placeholder whenever the input is focused. This all works fine until I tried it in Firefox. Firstly, when the placeholder moves up, it disappears even though it has the display: block styling.
Secondly, after typing some text then emptying then not focusing anymore on the input a weird line appears on top of the input.
I've tried changing some styles but nothing worked so far.
Here's a link to my jsfiddle page: https://jsfiddle.net/Etibi/z231ogeL/

Etienne Bibaud
  • 69
  • 1
  • 5
  • 4
    Welcome to Stack Overflow! The way SO works, your whole question (including any necessary code) has to be **in** your question, not just linked. Two reasons: People shouldn't have to go off-site to help you; and links rot, making the question and its answers useless to people in the future. Please put a [mcve] **in** the question. More: [*How do I ask a good question?*](/help/how-to-ask) and [*Something in my web site or project doesn't work. Can I just paste a link to it?*](https://meta.stackoverflow.com/questions/254428/) – T.J. Crowder Jan 31 '20 at 15:41

1 Answers1

0

First of all, the text disappears because background-clip: text only exists in webkit, and there's no solution in Firefox, that's why it's showing nothing.

https://stackoverflow.com/a/4743930/3930247

https://stackoverflow.com/a/9363156/3930247

There are some solutions for gradient text in Firefox, such as using SVGs. Also check this out: https://codepen.io/giana/pen/RPdLaQ

technophyle
  • 7,972
  • 6
  • 29
  • 50