4

私がやろうとしていることは、おそらく画像（以下に含める）で最もよく説明できますが、基本的にinputは、既存の値の半分であり、残りの半分は置き換え可能なテキストHTMLフィールドです。valueaとフィールドの両方を追加placeholderしてからCSSでそれらを分離しようとしpadding-leftましたが、代わりにブラウザー（Chrome）はplaceholder完全に無視します。

サンプル画像

文字列「turingpages.com/」と「username」の区切りに注意してください。「turingpages.com/」を編集不可のままにし、「username」をHTML5プレースホルダーとして機能させたい。どうすればこの効果を達成できますか？

4

1 に答える 1

2

2つの要素にして、1つであるかのようにスタイルを設定します。

それらを並べて配置し（またはlabel、クリックして機能するように外側をネストして外側を作成します）、input適切な要素のみを作成します。

<label class="group">turingpages.com/<input type="text" placeholder="username"/></label>

と

label.group{
    line-height:40px;
    background-color:white;
    display:inline-block;
    padding:0 10px;
    font-size:14px;
}
label.group input{
    border:0;
    background-color:transparent;
    padding:0;
    display:inline;
    color:#aaa;
}

http://jsfiddle.net/gaby/ahTJv/でのデモ

于 2013-01-28T17:48:34.533 に答える