使用CSS在Web窗体上的某些控件周围创build一个组框

我在三个下拉列表的Web表单上有三个控件。

我想围绕这些控件创build一个graphics“框”。 原因是select这些控件将是我的过程的“第一步”。 所以我想围绕这些控件放一个盒子,称之为“第一步”

我将如何去做这个与CSS?

例:

表单元素周围的框

带有legendfieldset为表单控件提供了视觉和语义分组。 然后,您可以根据需要用CSS来设置它的样式。 fieldset有点独特之处在于, legend能够可视地中断其父fieldset的边界(可能与其他元素,但是很难)。

例如: 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; } 

有一个fieldset HTML元素,它是为了这个特定的目的而创build的: http : //www.w3.org/wiki/HTML/Elements/fieldset 。 如果你只使用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 (或您希望用于标题的任何types的HTML元素)和包含input元素的div

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