Testifier Testifier - 5 months ago 30
CSS Question

Create a group box around certain controls on a web form using CSS

I have three controls on my web form of three drop down lists.

I want to create a graphical "box" around these controls. The reason for this is that selecting these controls would be "STEP 1" of my process. So I want to put a box around these controls and call it "Step 1"

How would I go about doing this with CSS?


box around form elements


A fieldset with a legend provides a visual and semantic grouping for form controls. You can then style this as desired with CSS. A fieldset is somewhat unique in that the legend is capable of visually interrupting the border of its parent fieldset (possible with other elements, but difficult).

Example: http://jsfiddle.net/NUMcr/1/

<legend>Group 1</legend>
    <input type="text" />
    <asp:Textbox runat="Server" id="txt1" />
    <!-- etc -->

Including CSS in case link to fiddle is ever broken:

    margin: 8px;
    border: 1px solid silver;
    padding: 8px;    
    border-radius: 4px;
    padding: 2px;