1

次のようなフォーム入力フィールドを作成しようとしています

フォームフィールド

domain.com/username/ は編集不可のテキスト (フォーム データとして送信されない) ですが、ユーザーはその末尾に必要な内容を入力できます。これに Javascript を使用できることはわかっていますが、CSS だけでそれを行うクリーンで非ハッキーな方法はありますか? もちろん、ユーザー名のサイズはさまざまであるため、編集可能なテキストは適切な場所から開始する必要があります。

4

2 に答える 2

1

デフォルトのブラウザー スタイルの入力が必要なく、HTML を編集できる場合は、次のようなカスタム フィールドを作成できます - http://jsfiddle.net/Apriillion/aJQ6M/ :

HTML:

<label class="looks_like_input">
  domain.com/username/
  <input type="text" value="all-about-kitties">
</label>

CSS:

.looks_like_input {
    border: 1px inset;
    font-weight: bold;
}
.looks_like_input input {
    border: 0;
    font-weight: normal;
}
于 2013-04-12T17:43:40.507 に答える
0

domain.com/username/ にラベルを付けてから、入力を入れてみませんか?

これをCSSに入れます

#page{float:left;}
#box{border:1px inset; height:30px;}
.text_field{border:none;}

これは HTML で

<div id="page">
<div id="box">
<input class="text_field" style="float:right; min-width:50px;width:50px;max-width:130px;text-align:left;" size="5" onkeyup="this.size=this.value.length+1;this.style.width='auto'" type="text">
<label class="prefix_for_input" style="float:right;">http://millerpath.tumblr.com/</label>
</div>
</div>

このあたりのいくつかを修正したいかもしれません。

于 2013-04-12T17:28:05.470 に答える