text-align: right; breaks background-clip: text;

Question

I was trying to use a gif as background for a text as shown in the example but when the text is aligned to the right, it becomes transparent. Any idea if this can be fixed?

.team {
    font-family: "Poppins", sans-serif;
    width: 100%;
    border: none;
    font-size: 2rem;
    text-transform: uppercase;
    text-align: left;
    font-weight: 600;
    background-image: url(https://media1.giphy.com/media/3oGRFmtqXJogGVcz6g/giphy.gif);
    color: transparent;
    background-clip: text;
    -moz-background-clip: text;
    -webkit-background-clip: text;
}

<center>
  <input class="team" type="text" placeholder="Align Left" value="This works fine" />
  <input class="team" style="text-align: right;" type="text" placeholder="Try me" />
  <input class="team" style="text-align: center;" type="text" placeholder="Align Center" value="This also works fine"/>
</center>

Answer 1

UPDATE: The snippet in the question seems to work OK in Firefox (on Windows 10) and Safari (on IOS) in that any text inputted does pick up the formatting of class team (the transparent text and clip) OK.

However, on Chrome/Edge on Windows 10 it does not. The text is transparent as requested but the background image disappears completely (if you remove the clipping the background is there OK).

I can't find any report of this as a possible bug. Hopefully someone can.

Originally I had mistakenly thought the question concerned the lack of formatting on the placeholder. I leave this here in case someone lands here in the future with the same thought: The difference in formatting in the second example in the question's snippet is not because of the text-align: right but because that example is not showing the value of the input but its placeholder - it does not have a value attribute set.

The placeholder is normally pale gray and that is what is shown here. The placeholder can be styled but it is a pseudo element so we need to add ::placeholder to the selector.

As in this snippet:

.team, .team::placeholder  {
    font-family: "Poppins", sans-serif;
    width: 100%;
    border: none;
    font-size: 2rem;
    text-transform: uppercase;
    text-align: left;
    font-weight: 600;
    background-image: url(https://media1.giphy.com/media/3oGRFmtqXJogGVcz6g/giphy.gif);
    color: transparent;
    background-clip: text;
    -moz-background-clip: text;
    -webkit-background-clip: text;
}

.team::placeholder {
  text-align: right;
}

<center>
  <input class="team" type="text" placeholder="Align Left" value="This works fine" />
  <input class="team" style="text-align: right;" type="text" placeholder="Try me" />
  <input class="team" style="text-align: center;" type="text" placeholder="Align Center" value="This also works fine"/>
</center>