html - 静的プレースホルダーで入力を自動的にスケーリングする方法は?

Question

このハックを使用して、input次の静的プレースホルダーを作成しました。

<div class="l_standard staticPlaceholder">
    <label for="alias" style="cursor: text;">site.com/</label>
    <input type="text" name="alias" id="alias" maxlength="15" />
</div>

ただし、サイズ変更時にこの構造が壊れないように、 widthforを手動で設定する必要があります。これを「ゴム」のようinputにするにはどうすればよいですか？input

ここに例があります - http://jsfiddle.net/qKfqa/入力フィールドがダウンし、建設にブレーキがかかります。

ありがとう。

Answer 1

.staticPlaceHolder広くするだけ。私はそれを次のように変更しましたwidth: 300px;: http://jsfiddle.net/qKfqa/1/

Answer 2

width: 100%;入力にbox-sizing: border-box​​.

http://jsfiddle.net/qKfqa/2/