CSS - moving image using centered text input text

Question

I have 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;
}

An input element should easily move in the background only with an HTML icon indicating that it is really an input. The HTML icon will remain in a static position with the current markup, as new text will be added to the input.

In any case, so that the HTML icon starts to the right of the first letter and does it gradually move to the left when the left border of the text line pushes in the same direction?

Script example

Answer 1

If you're fine with contenteditable, you can try the following:

span{
  display: inline-block;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
span::before {
  content: '\270D';
}

 <span contenteditable='true'></span>

Run codeHide result

Answer 2

, ( ) jquery.

fiddle

$('input').bind('keypress', function(e) {
	var tester = $(this).val().length;
  var code = e.keyCode || e.which;
  var currentWidth = $('input').css('width').slice(0, -2);
  var currentWidthParsed = parseInt(currentWidth, 10);
 	if(code == 8) {
    var newWidth = (currentWidthParsed - 8) + 'px'
    $('input').css('width', newWidth);
 } else {
    var newWidth = (currentWidthParsed + 8) + 'px'
    $('input').css('width', newWidth);
 }
});

body {
  text-align: center;
}
input{
    text-align: left;
    border: none;
    outline: none;
    background-color: transparent;
    width: 100px;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<span>
  &#9997;
</span>
<input type="text">

Hide result

Answer 3

As far as I know, you cannot have dynamic input widths with something like width: auto. In this case, you may have a shell with fixed and text alignment.

So, I would say that the only possibility is to have this icon inside the input value (if it can exist as a UTF-8 icon), and then turn it off when processing the value. But of course it would seem dirty.