web-dev-qa-db-ja.com

cssを介して入力を非表示にしますか？

ウェブサイトのブランドに応じて、2つの入力フィールドのいずれかが1つの特定の場所に表示されるフォームがあります。

両方の入力フィールドを同じコンテナーに入れてから、スタイルシートでそのうちの1つをdisplay：none;に設定すると思いました。これはフィールドを非表示にしますが、それでもスペースを占有します。また、高さと幅を0に設定するか、可視性を非表示または折りたたみに設定しようとしましたが、いずれも機能しませんでした。

これまで、ブランディングはすべてcssスタイルのシートで行うことができたので、そのままにしておきたいと思います。このソリューションは、少なくともIE6以降、Firefox 2以降、およびChrome（最新）でサポートされている必要があります。

htmlcsshide
12
Boris Callens

非表示の入力フィールドをposition: absolute;に設定すると、レンダリングフローから除外されます。

ただし、display: noneに設定すると、理論的には同じようになります...

8
peirix

入力を使用してみませんかtype="hidden"？

14
adrien334
<style>
.hideme
{
    display:none;
    visibility:hidden;
}
.showme
{
    display:inline;
    visibility:visible;
}
</style>


<input type="text" name="mytext" class="hideme">

Class = "hideme"を設定してコントロールを非表示にするか、class = "showme"を設定してコントロールを表示することができます。このトグルは、JavaScriptまたはサーバーサイドコーディングを使用して設定できます。

5
Bhaskar

これはフィールドを非表示にしますが、それでもスペースを占有します。

これは起こらないはずです。 display：noneを指定すると、要素がフローに含まれなくなります。 CSSの残りの部分を確認します（Firebugを使用して、余分な「スペース」（おそらく周囲の要素の単なるパディングまたはマージン）がどこから来ているのかを調べてください）。

3
Rahul

私はCSSにあまり詳しくありませんが、JavascriptとCSSを組み合わせて比較的簡単にそのようなことを実行できるようにする JQuery を実装してみることができます。

0
Maxim Zaslavsky

可視性プロパティを使用すると、要素が表示されていない場合でもレンダリングスペースが占有されます。可視性を使用する代わりに、表示プロパティを使用する必要があります。

要素を非表示にする場合は、 display をnoneに設定できます。 blockまたはinlineに表示します/表示したい場合。

ディスプレイチェックを見るには this

Displayプロパティを設定しても問題が解決しない場合は、テキストボックスが完全に配置されている可能性があります。レイアウトを変更しない理由かもしれません。

完全なコードを投稿していただけますか？

0
rahul