How to target multiple browsers in Angular 11 project using scss

user_12436823 0
Viewed 66

for example: i am animating the ::placeholder pseudo element on ::focus

  input::placeholder{
       color: grey;
       transition: all 400ms ease;
       position: absolute;
       top: 35%;
       font-size: 15px;
  }

   input:focus::placeholder{
       color: green;
       top: 0%;
       font-size: 10px;
       position: relative;
  }

in Chrome it works perfectly fine, but in Firefox and Safari does not work, anyone can help please, i really need to be able to do it. Thank you

angular sass css
2 Answers

You can use vendor prefixes to accomplish what you want.

In the given example, to work with Firefox, you should use ::-moz-placeholder.

You can find more about vendor prefixes here

user_60201140

I suppose you just need to add firefox support to the .browserslistrc file.

user_3901610
Related