使用CSS在Web表单上的某些控件周围创建一个组框
我在三个下拉列表的网络表单上有三个控件.
我想围绕这些控件创建一个图形"框".原因是选择这些控件将是我的过程的"第1步".所以我想在这些控件周围放一个方框并称之为"第1步"
我将如何使用CSS进行此操作？
例:
Tim*_*ora 80
A fieldsetwith a legend为表单控件提供视觉和语义分组.然后,您可以根据需要使用CSS设置此样式.A 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;
}
Gro*_*mer 12
有一个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包含输入元素的样式.