CSSは、私は、次のHTMLとテキスト入力を持つ中心のテキスト揃え入力テキスト

Question

で画像の動きを持っています実際には入力であることを示すHTMLアイコンのみを背景にして表示されます。新しいアイコンが入力に追加されると、HTMLアイコンは現在のマークアップで静的な位置にとどまります。

HTMLアイコンが最初の文字のすぐ左から始まり、テキスト文字列の左境界線が同じ方向にプッシュするので、徐々に左に移動しますか？オート：

Fiddle Example

Answer 1

は、私の知る限りでは、あなたは、幅のようなもので、入力のダイナミックな幅を持つことができません。その場合には、withとtext-align rightを持つラッパーを使用することができます。

私は、入力の値の中にそのアイコンがある（UTF-8アイコンとして存在する可能性がある）場合、唯一の可能性があると言います。もちろん、これは汚れているようです。あなたはこれを試みることができるのcontentEditableでOKなら

Answer 2

：

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

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

Answer 3

可能ですが、使用して（仕事の多くを必要とする）アイデア不完全jqueryの。

fiddle

$('input').bind('keypress', function(e) { 
 
\t var tester = $(this).val().length; 
 
    var code = e.keyCode || e.which; 
 
    var currentWidth = $('input').css('width').slice(0, -2); 
 
    var currentWidthParsed = parseInt(currentWidth, 10); 
 
    \t 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">