Menu
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?
Example:
247
Definition and Usage The <fieldset> tag is used to group related elements in a form. The <fieldset> tag draws a box around the related elements.
The <fieldset> HTML element is used to group several controls as well as labels ( <label> ) within a web form.
The <div> tag is used to group other HTML content together. The <div> element doesn't add or change the content of your HTML. Instead, its main purpose is to provide an easy way to target and each group.
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/
<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; } There is the fieldset HTML element, which is made for this specific purpose: http://www.w3.org/wiki/HTML/Elements/fieldset. If you are set on using CSS only, you could do something like this:
<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> You could then style the h1 (or whatever type of HTML element you'd like to use for the header) and the div containing the input elements.
24
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
