- CSS
- 参照数: 2967
金額を入力するフォームの場合、inputタグの後に円と表示させる場合があると思いますが、なんかいまいちダサいし、もっとスマートに出来ないかなと思って試した例です。
具体例
こんな感じ。
コード
上の方
<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にフォーカス出来ず入力が出来なくなってしまいます。