Create a group box around certain controls on a web form using CSS

HtmlCss

Html Problem Overview

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

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"

How would I go about doing this with CSS?

Example:

> box around form elements

Html Solutions

Solution 1 - Html

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;    
}

Solution 2 - Html

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.

Solution 3 - Html

<form>
  <fieldset>
    <legend>Personalia:</legend>
    Name: <input type="text"><br>
    Email: <input type="text"><br>
    Date of birth: <input type="text">
  </fieldset>
</form>
Categories
Recommended Html Solutions
Recommended Css Solutions

Previous Solution:

Tooltips for mobile browsers

MobileMobile WebsiteTooltipHtml

Next Solution:

Test discovery failure when tests in different directories are called the same

PythonUnit TestingPytestAutodiscovery

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionJJ.View Question on Stackoverflow
Solution 1 - HtmlTim M.View Answer on Stackoverflow
Solution 2 - HtmlGromerView Answer on Stackoverflow
Solution 3 - HtmlJayakrishnan KView Answer on Stackoverflow