2012-09-24 6 views
52

Webフォームに3つのドロップダウンリストが3つあります。CSSを使用してWebフォーム上の特定のコントロールの周りにグループボックスを作成します。

これらのコントロールの周りにグラフィックの「ボックス」を作成したいと思います。その理由は、これらのコントロールを選択することは自分のプロセスの「ステップ1」になるからです。だから私はこれらのコントロールの周りにボックスを入れて "ステップ1"と呼んでほしい

どうすればこのことをCSSでやっていくのですか?

例:legend

box around form elements

答えて

71

fieldsetフォームコントロールの視覚的および意味論的グループ化を提供します。 CSSを使用してこれをスタイル設定することができます。 fieldsetは、legendがその親の境界を視覚的に中断することができるという点で幾分ユニークです(他の要素では可能ですが難しい)。

例:http://www.w3.org/wiki/HTML/Elements/fieldsethttp://jsfiddle.net/NUMcr/1/

<fieldset> 
<legend>Group 1</legend> 
    <input type="text" /> 
    <asp:Textbox runat="Server" id="txt1" /> 
    <!-- etc --> 
</fieldset> 
fieldset { 
    margin: 8px; 
    border: 1px solid silver; 
    padding: 8px;  
    border-radius: 4px; 
} 

legend { 
    padding: 2px;  
} 
+0

hmmmmmmmフィールドセットタグを追加しましたが、コントロールがボックスに表示されません。これらのコントロールにはcssクラスが付属しており、位置決めはすべてそれらに設定されています。これは問題かもしれませんか? – Testifier

+0

かもしれません。 Fieldsetは単なるコンテナなので、修正可能な問題でなければなりません。フィールドセットに 'position:relative'を設定してみてください。あるいは、コントロール上のCSSを一時的に取り除いてみてください。 –

+0

がprobであった。どうも! – Testifier

12

この特定の目的のために作られfieldset HTML要素は、あります。あなただけCSSを使用して設定されている場合、あなたはこのような何かを行うことができます:

<html> 
<head></head> 
<body> 

    <h1>Step 1</h1> 
    <div style="border: 1px solid #000000;"> 
     <input type="text" /> 
     <input type="submit" value="Submit" /> 
    </div> 

</body> 
</html> 

はその後、h1(または任意のHTML要素のタイプあなたは、ヘッダーのために使用したい)とdivを含むのスタイルができ入力要素。

3
<form> 
    <fieldset> 
    <legend>Personalia:</legend> 
    Name: <input type="text"><br> 
    Email: <input type="text"><br> 
    Date of birth: <input type="text"> 
    </fieldset> 
</form> 
+0

あなたの答えに少し説明を加えてください – HaveNoDisplayName

関連する問題