使用CSS在网络表单上的某些控件周围创建一个组框 [英] Create a group box around certain controls on a web form using CSS

问题描述

我的三个下拉列表的Web窗体上都有三个控件.

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

我想围绕这些控件创建一个图形框".原因是选择这些控件将是我过程的步骤1".因此，我想在这些控件周围放一个框，并将其命名为第1步"

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"

我将如何使用CSS做到这一点?

How would I go about doing this with CSS?

示例:

推荐答案

带有legend的fieldset为表单控件提供视觉和语义分组.然后，您可以根据需要使用CSS设置样式. fieldset在某种程度上是唯一的，因为legend能够在视觉上中断其父级fieldset的边界(可能与其他元素配合，但很困难).

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).

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

这篇关于使用CSS在网络表单上的某些控件周围创建一个组框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！