2014年2月22日土曜日

HTMLのテキストボックスをラベルのような見た目に変更する方法を紹介します。
ここではラベルとは、入力できない編集不可の項目をさしてます。

テキストボックスで作られた項目が仕様変更などにより編集不可になった場合、
disabledやreadonly、ラベルなど色々方法がありますが、
背景グレイがダメ(disabled)、見た目がテキストボックスがダメ(readonly)、
hiddenを追加するのは工数的にダメ・・・・こんな時に使えるのかな。

テキストボックスをラベルのようにする場合、こんな感じ。


ラベル



ラベル

HTMLのテキストボックスをラベルのようにするには

ラベルっぽくなりましたね。

下記のように画面の背景に色が付いている場合、上記コードのままだとこんな感じになります。

こんな場合は、テキストボックスを透明にします。
この部分です。
background-color:transparent

0 コメント:

コメントを投稿

要望&問い合わせ

名前

メール *

メッセージ *