金額を入力するフォームの場合、inputタグの後に円と表示させる場合があると思いますが、なんかいまいちダサいし、もっとスマートに出来ないかなと思って試した例です。

具体例

@hoge.com

こんな感じ。

コード

  • 上の方

    <div class="input-mark" style="width: 180px;">
      <input  type="text" id="test-text">
      <span class="mark-text">@hoge.com</span>
    </div>
  • 下の方

    <div class="input-mark" style="width: 60px;">
      <input  type="text" id="test-num">
      <span class="mark-text">円</span>
    </div>

  • CSS

    /* === Form ================================= */
    
    input[type="text"] {
      border-style: solid;
      border-width:  1px;
      border-color: #c9c9c9;
      color: #333333;
      font-size: 100%;
      line-height: 1em;
      height: 1em;
    }
    
    /* === InputMark ================================= */
    
    /* 入力フォームの背景に表示する文字列のスタイル */
    
    .input-mark {
      position: relative;
    }
    
    .input-mark input[type="text"], {
      width: 100%;
      padding: 5px;
      position: relative;
      top: 0;
      left: 0;
      z-index: 1;
      background-color: transparent;
    }
    
    .input-mark span.mark-text {
      width: 100%;
      padding: 6px 5px;
      text-align: right;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 0;
      color: #888888;
      background-color: #ffffff;
      line-height: 1em;
      height: 1em;
    }

CSSはプロパティ名で並んでなくて見苦しいですが、こんな感じです。

大雑把な解説

positionプロパティを使用して、inputタグとspanタグを同一の位置に移動させています。
.input-mark input[type="text"]に対しては、本当はpositionで移動させる必要なないのですが、z-indexの指定の都合上こういう指定になっています。

上記の例では柔軟性の問題で、widthはdiv.input-markのstyle属性で決めていますが、CSS側で指定しても構いません。
あまりバラバラなサイズにしても統一感を欠くので、数パターンで決めて置くのも良いかと思います。

paddigの指定

例では、.input-mark input[type="text"]の上下のpaddingは5pxですが、.input-mark span.mark-textでは6pxになっています。
これは、inputに対する枠の領域を考慮しているからです。

line-heightとheightの指定

例では、ともに1emの指定となっていますが、適当な任意の値にしても構いません。
ですが、両者とも設定しないとブラウザ間でinputとspanの内容の位置ズレが起こるようになります。

inputに対するbackgroundの設定

この例では、inputの下にspanが配置されています。そのままではinputに隠されてしまいspanの内容が見えなくなるので、background-colorプロパティにtransparentを指定して背景色を透過させています。
z-indexを逆にして、inputの上にspanを来るようにすると表示上は問題ないのですが、inputにフォーカス出来ず入力が出来なくなってしまいます。