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

前端未结

关注

 3  966

栀梦

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 co

相关标签:

3条回答

情深已故

2021-02-04 23:40

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

0 讨论(0)

攒了一身酷

2021-02-05 00:03
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" />
    
</fieldset>
```
```
fieldset {
    margin: 8px;
    border: 1px solid silver;
    padding: 8px;    
    border-radius: 4px;
}

legend {
    padding: 2px;    
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
独厮守ぢ

2021-02-05 00:03
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.
0 讨论(0)
发布评论:

提交评论
- 加载中...