Archivo de la etiqueta: html

CSS – Have Image Move With Centered Text-Align Input Text

I have an text input with the following HTML:

<span>
    &#9997;
</span>
<input type="text">

and the corresponding CSS:

input{
    text-align: center;
    border: none;
    outline: none;
    background-color: transparent;
}

The input element should blend seamlessly into its background with only the HTML icon indicating that it is indeed an input. The HTML icon will remain in a static position with the current mark-up as new text is added into the input.

Is there anyway to have my HTML icon start right to the left of the first letter and have it gradually move toward the left as the left boundary of the text string pushes in the same direction?

Fiddle Example