Lewis Day Lewis Day - 5 months ago 23
Javascript Question

CSS animation inside of input text?

What I'm trying to achieve is have a marquee inside of a input text, like blow;

<input type="text" class="form-control" value="<marquee>Hi</marquee>" disabled></input>


I have tagged this as JavaScript as I don't think this is possible with just plain html, I could be mistaken however.

EDIT - Perhaps instead of the outdated
<marquee>
tag, I could use a CSS animation instead of the marquee to create the text scroll across the input.

Answer

CSS animations can mimic that functionality.

@-webkit-keyframes marquee {
    0% {text-indent:100%;}
    100% {text-indent:-10%}
}

input.marquee {
  -webkit-animation: marquee 5s infinite;
  -webkit-animation-timing-function: linear;
  }
<input type="text" class="form-control marquee" value="Hi" disabled ></input>

<marquee>Hi</marquee>