使用 CSS 在 Web 表单上的某些控件周围创建一个组框

我有三个控件在我的网络形式的三个下拉列表。

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

我该如何使用 CSS 来做这件事？

例如:

box around form elements

91183 次浏览
小开
最佳答案

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.

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

提交答案