75

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

我想围绕这些控件创建一个图形“框”。这样做的原因是选择这些控件将是我过程的“步骤 1”。所以我想在这些控件周围放一个框并称之为“步骤 1”

我将如何使用 CSS 进行此操作？

例子：

框住表单元素

4

3 回答 3

98

fieldset带有 a的Alegend为表单控件提供了视觉和语义分组。然后，您可以根据需要使用 CSS 设置样式。Afieldset有点独特，因为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;    
}
于 2012-09-24T19:59:05.417 回答
14

有一个fieldsetHTML 元素，它是为此特定目的而制作的：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（或您希望用于标题的任何类型的 HTML 元素）和div包含输入元素的样式。

于 2012-09-24T20:01:43.223 回答
4 
<form>
  <fieldset>
    <legend>Personalia:</legend>
    Name: <input type="text"><br>
    Email: <input type="text"><br>
    Date of birth: <input type="text">
  </fieldset>
</form>
于 2015-09-18T06:36:31.163 回答