Best IT Recipes

Create a group box around specific controls in a web form using CSS

I have three controls in my three-drop-down web form.

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

How do I do this using CSS?

Example:

box around form elements

+49
html css
Sep 24 '12 at 19:55
source share
3 answers

A fieldset with legend provides visual and semantic grouping for form controls. You can then create the style as you wish using CSS. A fieldset somewhat unique in that legend is able to visually interrupt the border of its parent fieldset (possibly 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; }
+68
Sep 24 '12 at 19:59
source share

There is an HTML fieldset element that is created for this specific purpose: http://www.w3.org/wiki/HTML/Elements/fieldset . If you use only CSS, you can 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 can then create a h1 style (or any type of HTML element that you want to use for the title), and a div containing input elements.

+12
Sep 24 '12 at 20:01
source share
 <form> <fieldset> <legend>Personalia:</legend> Name: <input type="text"><br> Email: <input type="text"><br> Date of birth: <input type="text"> </fieldset> </form>
+3
Sep 18 '15 at 6:36
source share


More articles:


All Articles